浏览器跨域请求接口曾经困扰过很多人
![779ffc7ab6f6349062606413a9aa980a.png](https://i-blog.csdnimg.cn/blog_migrate/a7991b174573d1b84124091b7dbe4652.jpeg)
浏览器跨域报错
跨域解决方案
- 前端解决方案
- 配置浏览器不拦截跨域请求
众所周知,跨域报错是因为浏览器基于同源策略,拦截了开发者发起的跨域请求。对啊,让浏览器不要拦截不就好了嘛。前端开发应该都用的chrome吧?是就对了,打开终端:
windows:(假设chrome安装在C盘)
C:Program FilesGoogleChromeApplicationchrome.exe --disable-web-security --user-data-dir=D:MyChromeDevUserData
mac:
open -n /Applications/Google Chrome.app/ --args --disable-web-security --user-data-dir=~/Downloads/MyChromeDevUserData
chrome
chrome启动之后,访问你正在开发的项目地址,不会再有跨域的报错了。
- 配置跨域代理服务器
现在大多数项目都用脚手架了,脚手架一般都有配置代理服务器的地方,以vue-cli为例:
在项目根目录新建vue.config.js(如果没有),加上:
module.exports = {
devServer: {
proxy: {
'/api': {
target: ''
}
}
}
}
假设接口地址路径部分都以/api开头,把换成接口的origin。
前端解决方案只能在开发阶段解决,项目要上线时必须改成后端解决方案
- 后端解决方案
后端只需要在接口响应头加上“Access-Control-Allow-Origin”值为“*”