跨域(CORS)请求的几种解决方法

前端开发中我们经常会遇到跨域请求的情况，处理跨域请求方式很多

浏览器的同源策略

首选，跨域是由于浏览器端的同源策略限制所得来，跟服务器端没有关系。

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互，这是一个用于隔离潜在恶意文件的重要安全机制。

那么，何为同源呢？只有当协议（http、https）、端口（80、443）、域名（xxx.com）都相同的页面，则两个页面具有相同的源。只要网站的协议protocol、主机host、端口号port 这三个中的任意一个不同，网站间的数据请求与传输便构成了跨域调用，会受到同源策略的限制。

浏览器的同源策略，出于防范跨站脚本的攻击，禁止客户端脚本（如 JavaScript）对不同域的服务进行跨站调用（通常指使用 XMLHttpRequest 请求）。

跨域请求方式

解决跨域问题，最简单的莫过于通过 Nginx 反向代理进行实现，但是其需要在服务器层面修改，且有可能请求的资源并不再我们控制范围内（第三方），所以该方式不能作为通用的解决方案，下面阐述了经常用到几种跨域方式：

方式1：图片ping或script标签跨域

图片ping 常用于跟踪用户点击页面或动态广告曝光次数。

script标签可以得到从其他来源数据，这也是 JSONP 依赖的根据。

缺点：只能发送Get请求，无法访问服务器的响应文本（单向请求）

方式2：JSONP 跨域

JSONP（JSON with Padding）是数据格式 JSON 的一种“使用模式”，可以让网页从别的网域要数据。

根据 XmlHttpRequest 对象受到同源策略的影响，而利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的JSON数据，而这种使用模式就是所谓的 JSONP。用JSONP抓到的数据并不是JSON，而是任意的JavaScript，用 JavaScript解释器运行而不是用JSON解析器解析。所以，通过Chrome查看所有JSONP发送的Get请求都是js类型，而非 XHR。

缺点：

只能使用Get请求

不能注册 success、error 等事件监听函数，不能很容易的确定 JSONP 请求是否失败

JSONP 是从其他域中加载代码执行，容易受到跨站请求伪造的攻击，其安全性无法确保

方式3：CORS （推荐）

CORS（Cross-Origin Resource Sharing，域资源共享）是一份浏览器技术的规范，提供了 Web 服务从不同域传来沙盒脚本的方法，以避开浏览器的同源策略，确保安全的跨域数据传输。

现代浏览器使用CORS在API容器如XMLHttpRequest来减少HTTP请求的风险来源。

与 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。

服务器一般需要增加如下响应头的一种或几种：

Access-Control-Allow-Origin: *
Access-Control-Max-Age: 86400
Access-Control-Allow-Methods: POST, GET, OPTIONS, HEAD
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type

跨域请求默认不会携带Cookie信息，如果需要携带，请配置下述参数：

"Access-Control-Allow-Credentials": true
# Ajax设置
"withCredentials": true

添加 header 以后的 Response Headers

方式4：window.name+iframe

window.name通过在iframe（一般动态创建i）中加载跨域HTML文件来起作用。然后，HTML文件将传递给请求者的字符串内容赋值给window.name。然后，请求者可以检索window.name值作为响应。

iframe 标签的跨域能力；

window.name 属性值在文档刷新后依旧存在的能力（且最大允许2M左右）。

每个 iframe 都有包裹它的 window，而这个 window 是 top window 的子窗口。contentWindow属性返回<iframe>元素的Window对象。你可以使用这个Window对象来访问iframe的文档及其内部DOM。

下述用端口：10000表示 — domainA；10001表示 — domainB

<!-- localhost:10000 -->
<script>
  var iframe = document.createElement('iframe');
  iframe.style.display = 'none'; // 隐藏

  var state = 0; // 防止页面无限刷新
  iframe.onload = function() {
      if(state === 1) {
          console.log(JSON.parse(iframe.contentWindow.name));
          // 清除创建的iframe
          iframe.contentWindow.document.write('');
          iframe.contentWindow.close();
          document.body.removeChild(iframe);
      } else if(state === 0) {
          state = 1;
          // 加载完成，指向当前域，防止错误(proxy.html为空白页面)
          // Blocked a frame with origin "http://localhost:10000" from accessing a cross-origin frame.
          iframe.contentWindow.location = 'http://localhost:10000/proxy.html';
      }
  };

  iframe.src = 'http://localhost:10001';
  document.body.appendChild(iframe);
</script>

<!-- localhost:10001 -->
<!DOCTYPE html>
...
<script>
  window.name = JSON.stringify({a: 1, b: 2});
</script>
</html>

注意：

直接嵌入其他域（localhots:10001）下的URL会报错，所以需要加载完成替换为当前域的URL(localhots:10000)，proxy.html为空白页面，只为解决该问题；

重新设置 src（http://localhost:10000/proxy.html）后导致页面不断刷新，所以通过 state 来控制；

全部获取完结果后，清除该 iframe。

方式5：window.postMessage()

HTML5新特性，可以用来向其他所有的 window 对象发送消息。需要注意的是我们必须要保证所有的脚本执行完才发送 MessageEvent，如果在函数执行的过程中调用了它，就会让后面的函数超时无法执行。

下述代码实现了跨域存储localStorage

下述用端口：10000表示 — domainA；10001表示 — domainB

<!-- localhost:10000 -->
<iframe src="http://localhost:10001/msg.html" name="myPostMessage" style="display:none;">
</iframe>

<script>
  function main() {
      LSsetItem('test', 'Test: ' + new Date());
      LSgetItem('test', function(value) {
          console.log('value: ' + value);
      });
      LSremoveItem('test');
  }

  var callbacks = {};
  window.addEventListener('message', function(event) {
      if (event.source === frames['myPostMessage']) {
          console.log(event)
          var data = /^#localStorage#(\d+)(null)?#([\S\s]*)/.exec(event.data);
          if (data) {
              if (callbacks[data[1]]) {
                  callbacks[data[1]](data[2] === 'null' ? null : data[3]);
              }
              delete callbacks[data[1]];
          }
      }
  }, false);

  var domain = '*';
  // 增加
  function LSsetItem(key, value) {
      var obj = {
          setItem: key,
          value: value
      };
      frames['myPostMessage'].postMessage(JSON.stringify(obj), domain);
  }
  // 获取
  function LSgetItem(key, callback) {
      var identifier = new Date().getTime();
      var obj = {
          identifier: identifier,
          getItem: key
      };
      callbacks[identifier] = callback;
      frames['myPostMessage'].postMessage(JSON.stringify(obj), domain);
  }
  // 删除
  function LSremoveItem(key) {
      var obj = {
          removeItem: key
      };
      frames['myPostMessage'].postMessage(JSON.stringify(obj), domain);
  }
</script>

<!-- localhost:10001 -->
<script>
  window.addEventListener('message', function(event) {
    console.log('Receiver debugging', event);
    if (event.origin == 'http://localhost:10000') {
      var data = JSON.parse(event.data);
      if ('setItem' in data) {
        localStorage.setItem(data.setItem, data.value);
      } else if ('getItem' in data) {
        var gotItem = localStorage.getItem(data.getItem);
        event.source.postMessage(
          '#localStorage#' + data.identifier +
          (gotItem === null ? 'null#' : '#' + gotItem),
          event.origin
        );
      } else if ('removeItem' in data) {
        localStorage.removeItem(data.removeItem);
      }
    }
  }, false);
</script>

注意Safari下会报错：

Blocked a frame with origin “http://localhost:10001” from accessing a frame with origin “http://localhost:10000”. Protocols, domains, and ports must match.

避免该错误，可以在Safari浏览器中勾选开发菜单 => 停用跨域限制。或者只能使用服务器端转存的方式实现，因为Safari浏览器默认只支持CORS跨域请求。

方式6：修改 document.domain 跨子域

前提条件：这两个域名必须属于同一个基础域名！而且所用的协议，端口都要一致，否则无法利用 document.domain 进行跨域，所以只能跨子域

在根域范围内，允许把 domain 属性的值设置为它的上一级域。例如，在 “aaa.xxx.com” 域内，可以把 domain 设置为 “xxx.com” 但不能设置为 “xxx.org” 或者 “com”。

现在存在两个域名aaa.xxx.com和bbb.xxx.com。在aaa下嵌入bbb的页面，由于其 document.name不一致，无法在aaa下操作bbb的js。可以在aaa和bbb下通过js将 document.name = 'xxx.com'; 设置一致，来达到互相访问的作用。

方式7：WebSocket

WebSocket protocol 是 HTML5 一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很棒的实现。相关文章，请查看：WebSocket、WebSocket-SockJS

需要注意： WebSocket 对象不支持 DOM 2 级事件侦听器，必须使用 DOM 0 级语法分别定义各个事件。

方式8：代理

同源策略是针对浏览器端进行的限制，可以通过服务器端来解决该问题

DomainA客户端（浏览器） => DomainA服务器 => DomainB服务器 => DomainA客户端（浏览器）

实现HTTP、HTTPS代理请参照：创建HTTP与HTTPS服务器与客户端

方式9：Nginx 反向代理

nginx支持配置反向代理，通过反向代理实现网站的负载均衡。这部分先写一个nginx的配置，后续需要深入研究nginx的代理模块和负载均衡模块。 nginx通过proxy_pass_http 配置代理站点，upstream实现负载均衡。

在前端工作中，有时候会碰到跨域的问题，就是请求的接口地址和本身的服务器不属于一个域内，此时浏览器会报错：

XXXXX（请求的跨域url）has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested

网上有很多的解决办法，可以用jsonp来请求等，本文上面已介绍了。

这里可以用nginx的转发功能来实现，比如我这里axios请求的接口是

https://proxy.mimvp.com/abc/efg/hi?12341234324

用了axios的get方法直接请求了这个连接，不出意外的浏览器报错。

此时我在nginx里配置了这样一条

location /abc/efg/ {
	proxy_pass https://proxy.mimvp.com;
}

解释：

代码请求的连接直接改为 /abc/efg/hi?1234234242432

此时去掉了前面的域名，实际上请求的是我本地的地址：

127.0.0.1:端口号/abc/efg/hi?123121313

然后nginx碰到了 /abc/efg/

所以自动的捕捉匹配这个端口的地址，转到了

https://proxy.mimvp.com/abc/efg/hi?12341234324

可以实现的原因在于，出现了跨域问题是浏览器的报错，只要后台处理一下，用nginx转发（反向代理）就可以轻松的解决问题。

注意：在配置了nginx后，实际测试时没有生效，一度以为自己配的有问题，后来发现时我自己的电脑问题，事实证明，觉得配的没问题还一直折腾的时候，那就是电脑问题了，可以换服务器上试一试。nginx经常不生效的，感觉windows上的nginx不靠谱，建议不确定的时候可以把跳转连接换成www.baidu.com来实验一下。我本地测试的时候百度跳转都没生效，有时候怀疑电脑有问题可能是正确的。

其它成功的案例：