什么是跨域？如何解决？跨域的产生原因、解决方法以及vue解决跨域问题

前言

跨域，一个老生常谈的问题，但在此之前并没有实际遇到过这个问题，也就没怎么放在心上，然最近本地开发的时候遇到了，和想象中不一样，以为很快解决，还是花费了一定的时间去解决，现在把自己解决的方案进行总结，也避免大家之后采坑。

什么是跨域?

跨域指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对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请求不能发送
  

规避策略

1. cookie：设置document.domain共享cookie。
2. DOM获取：（父子页面通信）H5引入了一个API，这个API为windows对象新增了一个window.postMessage方法，允许跨窗口通信，无论这两个窗口是否同源。

window.opener.postMessage(content,origin)
content是消息的具体内容，origin是协议 + 域名 + 端口

AJAX

• JSONP：JSONP是服务器无客户端跨源通信的常用方法。基本思想是网页通过添加一个<script>元素，向服务器请求json数据，这种做法不受同源政策的限制，服务器收到请求后，将数据放在一个指定名字的回调函数里面传回来。（只能发GET请求）
• WebSocket：WebSocket是一种通信协议。使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。

CORS

跨域资源共享（corss-origin resource
sharing）：CORS需要浏览器和服务器同时支持。目前所有浏览器都支持该功能，IE浏览器不能低于IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

两种请求

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

参考文献

http://www.ruanyifeng.com/blog/2016/04/cors.html
阮一峰-跨域资源共享 CORS 详解
http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
阮一峰-浏览器同源政策及其规避方法
https://webpack.js.org/configuration/dev-server/
webpack文档
https://blog.moonlet.cn/archives/563
余浩的博客
https://www.jianshu.com/p/413a2f11828d
Husbin

以上便是本次分享的全部内容，希望对你有所帮助^_

前端程序猿Pro，不止于前端，如果你也对前端开发亦或者是程序员行业感兴趣欢迎您的关注~

如果你有任何想法和疑问，欢迎留言～ 一起探讨