前后端分离项目的跨域问题


问题：

请求跨域报错：

Blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested……


解决方案1

在Vue项目根目录下新建 vue.config.js文件，文件内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module.exports = {
    devServer: {
        open: true,
        host: 'localhost',
        port: 8091,
        https: false,
        //以上的ip和端口是我们本机的;下面为需要跨域的
        proxy: { //配置跨域
            '/api': {
                target: 'http://localhost:8092/', //这里后台的地址模拟的;应该填写你们真实的后台接口
                ws: true,
                changOrigin: true, //允许跨域
                pathRewrite: {
                    '^/api': '' //请求的时候使用这个api就可以
                }
            }
        }
    }
}

试了这种方式，但是在调试信息中看到输出的实际请求地址是http://localhost:8091/api/，返回404错误，不知道是不是哪里配置得不对。


解决方案2

在项目 config/index.js文件中的proxyTable中添加下面的内容，然后请求时的url拼接为：/api/xxx，这种方式能成功请求到后台。

不要配置axios.defaults.baseURL。

1
2
3
4
5
6
7
8
'/api': {
    target: 'http://localhost:8092/', //这里后台的地址模拟的;应该填写你们真实的后台接口
    ws: true,
    changOrigin: true, //允许跨域
    pathRewrite: {
        '^/api': '' //请求的时候使用这个api就可以
    }
}

改完配置之后记得重启项目！！


解决方案3

可以使用Nginx代理实现跨域，照着网上的资料配置了server的listen项和proxy项，但是没有配置成功，有时间再试试。