vue cors

Question

vue.config.js文件中的配置如下，

// vue.config.js
module.exports = {
    runtimeCompiler: true,
    devServer: {
        port: 8084,
        proxy: {
            '/oauth': {
                target: 'http://10.180.37.105',
                ws: true,
                changeOrigin: true,
            },

        }
    }
}

axios 请求url：http://10.100.1.121:8083/oauth/token 还是报跨域的错误。

请问是我的vue.config.js文件中哪里配置的不对么？

Answer 1

axios 不需要全路径

请求流程是这样的
本地devserver 开启服务器 -> 浏览器访问 devserver -> devserver判断是否需要代理 -> 需要转接 不需要直接访问返回本地资源

http://10.100.1.121:8083/oauth/token 直接请求这个地址是绕过devserver 所以axios不需要http://10.100.1.121:8083

Answer 2

proxy: {
        '/oauth': {
            target: 'http://10.180.37.105',
            ws: true,
            changeOrigin: true,
        },
    }

你目前这样写的话意思是/oauth/***现在会被代理到请求 http://10.180.37.105/oauth/***, 打个比方，你直接访问的/oauth/login 现在会被代理到请求 http://10.180.37.105/oauth/login, 你加上了自己的host的话实际上已经绕过了devserver，如果你喜欢加上你的host，那么可以这样写：

proxy: {
        '/oauth': {
            target: 'http://10.180.37.105',
            ws: true,
            changeOrigin: true,
            pathRewrite: {
                '^/oauth' : '/oauth'
            }
        },
    }
    这样你的http://10.100.1.121:8083/oauth/token会被匹配到，就会被代理到 http://10.180.37.105/oauth/login。不知道我说明白了吗