1.什么是跨域
跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。
源指协议，端口，域名。只要这个3个中有一个不同就是跨域。
协议跨域
http://a.baidu.com访问https://a.baidu.com；
端口跨域
http://a.baidu.com:8080访问http://a.baidu.com:80；
域名跨域
http://a.baidu.com访问http://b.baidu.com；
2.跨域产生的背景
现在很多公司都是采用前后分离的方式开发，那么出现经常和会跨域打交道。
跨域的处理方案：
A. Jsonp(只能处理Get请求)，B. cors(后端开启)，C. 代理服务器(vue项目中vue.config.js中配置)
下面我详细讲讲第三种代理服务器方式。
假设请求的API地址：https://localhost:44369/api/Index/GetMuserList
配置在vue.config.js中的内容，配置好之后要Ctrl+C取消，然后cnpm run dev重启前端服务
module
.
exports
= {
devServer
:
{
host
:
'localhost'
,
//前端地址
port
:
8081
,
// 前端端口号
open
:
true
,
//自动启动浏览器
proxy
:
{
// 配置跨域处理,可以设置多个
'/api'
:
{
//api表示请求的地址含有api,就会在api前面加上
'https://localhost:44369/'
,
target
:
'https://localhost:44369/'
,
changeOrigin
:
true
//开启跨域
}
}
}
}
// 发起的请求地址，发现含有api开头，就去vue.config.js找proxy里面的匹配项/api,在请求地址中加入代理服务器
const
{
data
:
res
} =
await
this
.
$http
.
get
(
'api/Index/GetMuserList'
)
注意，在配置了代理服务器之后，不能再设置
axios.defaults.baseURL = 'https://localhost:44369/' ，否则不能使用
来源：oschina
链接：https://my.oschina.net/u/4161514/blog/4437381