vue 跨域请求_浏览器跨域解决方案

浏览器跨域请求接口曾经困扰过很多人

浏览器跨域报错

跨域解决方案

• 前端解决方案

1. 配置浏览器不拦截跨域请求

众所周知，跨域报错是因为浏览器基于同源策略，拦截了开发者发起的跨域请求。对啊，让浏览器不要拦截不就好了嘛。前端开发应该都用的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启动之后，访问你正在开发的项目地址，不会再有跨域的报错了。

1. 配置跨域代理服务器

现在大多数项目都用脚手架了，脚手架一般都有配置代理服务器的地方，以vue-cli为例：

在项目根目录新建vue.config.js(如果没有)，加上：

module.exports = {

devServer: {

proxy: {

'/api': {

target: ''

}

}

}

}

假设接口地址路径部分都以/api开头，把换成接口的origin。

前端解决方案只能在开发阶段解决，项目要上线时必须改成后端解决方案

• 后端解决方案

后端只需要在接口响应头加上“Access-Control-Allow-Origin”值为“*”