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

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


问题:

请求跨域报错:

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项,但是没有配置成功,有时间再试试。

文章作者: iced-cola
文章链接: https://iced-cola.com/2020/12/20/Vue前后端分离项目中的跨域问题/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 iced-cola