什么是跨域？如何解决？跨域的产生原因、解决方法以及vue解决跨域问题
跨域的产生原因以及解决方法
- 前言
- 什么是跨域?
- 跨域解决方案
-
- 解决本地开发跨域问题
-
- Vue项目下解决跨域
- 谷歌浏览器跨域问题
- nginx反向代理解决跨域（前端常用）
-
- 正向代理：
- 反向代理：a--> c <--b
- 添加响应头解决跨域
- 通过jsonp解决跨域（老方法）
- 附：同源策略相关讲解
-
- 同源策略目的
- 同源策略的限制范围
- 规避策略
- CORS
- 两种请求
- 参考文献
前言
跨域，一个老生常谈的问题，但在此之前并没有实际遇到过这个问题，也就没怎么放在心上，然最近本地开发的时候遇到了，和想象中不一样，以为很快解决，还是花费了一定的时间去解决，现在把自己解决的方案进行总结，也避免大家之后采坑。
什么是跨域?
跨域指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。也可以这么说url是由：协议、域名、端口 三部分组成。当一个请求url的协议、域名、端口三者之间的任意一个与当前页面url不同即为跨域。
同源策略（Same Orgin Policy）是一种约定，它是浏览器核心也最基本的安全功能，它会阻止一个域的js脚本和另外一个域的内容进行交互，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。。所谓同源（即在同一个域）就是两个页面具有相同的协议（protocol）、主机（host）和端口号（port）。
跨域解决方案
解决本地开发跨域问题
以下是实际开发中vue项目解决本地开发环境解决跨域方案，本地真实有效
Vue项目下解决跨域
找到配置文件vue.config.js
设置代理，用来解决本地开发跨域问题，如果设置了代理，那你本地开发环境的axios的baseUrl要写为 ‘’ ，即空字符串
devServer: {
open: true, // 启动服务后是否打开浏览器
host: '0.0.0.0',
port: port, // 服务端口
https: false,
hotOnly: false,
proxy: '' // 设置代理
},
设置为空，如图所示：
proxy: {
'/api': { // api改后的请求接口
target: 'http://www.baidu.com', // 后端接口地址
pathRewrite: { // 重新
'^/api': ''
}
}
}, // 设置代理
谷歌浏览器跨域问题
给大家说一个物理攻击方式（强制更改浏览器），不过说话说的好：狸猫花猫，捉住老鼠就是好猫。
- Windows端
单击快捷方式 -> 右键点击属性设置，如图所示
在末尾添加 --disable-web-security --user-data-dir=C:\MyChromeDevUserData
c盘创建MyChromeDevUserData文件夹
重新打开，如下图显示即为成功
- Mac端
同理，新建MyChromeDevUserData文件夹，终端输入：
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/文件夹路径/MyChromeDevUserData
得等如Windows一样提示，说明配置成功。也可解决；
说明：以下解决方案是遇到问题是网上看到别的大神的解决方案，在这里一并总结过来，特别感谢余浩的博客
nginx反向代理解决跨域（前端常用）
正向代理：
a–>b访问不了，可以找个中间的服务器c, 先访问c再从c到b,类似曲线救国。
明确访问的目的地，但是用户不知道中间的代理服务器。（忽略中间服务器）
反向代理：a–> c <–b
a明确访问c代理服务器，但是不知道c的内容从哪里来，c反向从别的地方拿来数据。(忽略的是目标地址)
浏览器可以访问a,而服务器之间不存在跨域问题，浏览器先访问a的服务器c，让c服务器作为代理去访问b服务器,拿到之后再返回数据给a。
例如：
nginx是静态服务器，跨域请求放在api下面好管理http://www.baidu.com:80/api/user
可以在nginx下面的config下面的nginx.conf里面配置
从80端口进来的就拦截一下，代理到81端口
server{
location /api {
//拦截一下
proxy_pass http://www.baidu.com:81;
}
}
添加响应头解决跨域
浏览器先询问b,b允许a访问
access-control-allow-origin
access-control-max-age
PHP端修改header：
header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式
通过jsonp解决跨域（老方法）
**实现原理：**通常为了减轻web服务器的负载，我们把js、css、图片等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许。
html中有的标签天然支持跨域，比如但是只支持get请求。
附：同源策略相关讲解
特别感谢Husbin-出现跨域问题的原因及其解决方法
同源策略目的
保证用户信息安全，防止恶意网站窃取数据。同源策略是必须的，否则cookie可以共享。
同源策略的限制范围
- cookie、localstorage、indexdb无法读取。
- DOM无法获取。
- ajax请求不能发送
规避策略
- cookie：设置document.domain共享cookie。
- DOM获取：（父子页面通信）H5引入了一个API，这个API为windows对象新增了一个window.postMessage方法，允许跨窗口通信，无论这两个窗口是否同源。
window.opener.postMessage(content,origin)
content是消息的具体内容，origin是协议 + 域名 + 端口
AJAX
- JSONP：JSONP是服务器无客户端跨源通信的常用方法。基本思想是网页通过添加一个