跨域的说明和解决方案

首先我们要知道什么叫做同源策略以及跨域?

• 跨域的核心问题:浏览器的安全限制,导致只信任同源

- 同源策略:

• 是指浏览器自身保证安全的一种策略.域名端口协议相同则同源

- 跨域:

• 域名端口协议只要有一个不同,就意味着跨域了.

- 解决跨域的几种方案:

• jsonp

1. 好处:兼容性好
2. 原理:动态创建script标签,script标签的请求,图片,css,js的加载,资源类型的加载,不受同源策略的限制
3. 缺点:只能进行get请求

• cors

1. 好处:方便,简单,前端不用动(主流)
2. 缺点:兼容性差

• 反向代理-代理服务器(node.nginx)

1. 好处:兼容性好,能够进行get和post请求
2. 缺点:需要配置,配置起来会稍微麻烦一点

反向代理(配置一个代理服务器,请求转发)

1. 只要是个服务器就能配置代理
2. 生产环境时用 node服务器
3. 开发时使用webpack开发服务器

配置方向服务器的原理:

1. 配置一个代理服务器(自己请求自己),让代理转发请求
2. 服务器之间是不存在跨域问题的
3. 这样我们发送请求时只需要给代理服务器发送请求再由代理服务器接收数据给到浏览器
4. 浏览器器是信任我们的代理服务器的这样就不存跨域问题

• 在webpack开发服务器的vue.config.js中配置我们的代理服务器

//开发服务器上配置代理服务器

devServer:{
proxy:{
//开启了一个代理,将来如果有包含/api的请求(标记) 我会帮你代理转发
'/api':{},
//如果有多个代理可以把代理写在下面,没有不用写
'/xxx':{},
//后端服务器真正的地址
targe:'http://localhost:3000',

//下面的配置不是必选的! 要看后端接口地址中有无/api
//设置路径重写 代理标记就会被替换成''
pathRewrite:{
'^/api':''
}
}

配置完之后重启服务器