八种方式实现跨域请求

超、凢脫俗 2021-09-16 12:14 451阅读 0赞

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

## 浏览器的同源策略 ##

提到跨域不能不先说一下”同源策略”。  
 何为同源？只有当**协议**、**端口**、和**域名**都相同的页面，则两个页面具有相同的源。只要网站的 协议名protocol、 主机host、 端口号port 这三个中的任意一个不同，网站间的数据请求与传输便构成了跨域调用，会受到**同源策略**的限制。  
 **同源策略**限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。浏览器的同源策略，出于防范跨站脚本的攻击，禁止客户端脚本（如 JavaScript）对不同域的服务进行跨站调用（通常指使用XMLHttpRequest请求）。

## 跨域请求方式 ##

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

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

**图片ping**常用于跟踪用户点击页面或动态广告曝光次数。  
**script标签**可以得到从其他来源数据，这也是JSONP依赖的根据。  
**缺点：**只能发送Get请求 ，无法访问服务器的响应文本（单向请求）

### 方式二：JSONP跨域 ###

**JSONP**（**JSON with Padding**）是数据格式[JSON][]的一种“使用模式”，可以让网页从别的网域要数据。根据 XmlHttpRequest 对象受到同源策略的影响，而利用 [`<script>`][script]元素的这个开放策略，网页可以得到从其他来源动态产生的JSON数据，而这种使用模式就是所谓的 JSONP。用JSONP抓到的数据并不是JSON，而是任意的JavaScript，用 JavaScript解释器运行而不是用JSON解析器解析。所有，通过Chrome查看所有JSONP发送的Get请求都是js类型，而非XHR。  
![跨域请求JSONP][JSONP]  
**缺点：**

*  只能使用Get请求
 *  不能注册success、error等事件监听函数，不能很容易的确定JSONP请求是否失败
 *  JSONP是从其他域中加载代码执行，容易受到跨站请求伪造的攻击，其安全性无法确保

### 方式三：CORS ###

Cross-Origin Resource Sharing（CORS）跨域资源共享是一份浏览器技术的规范，提供了 Web 服务从不同域传来沙盒脚本的方法，以避开浏览器的同源策略，确保安全的跨域数据传输。现代浏览器使用CORS在API容器如XMLHttpRequest来减少HTTP请求的风险来源。与 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。服务器一般需要增加如下响应头的一种或几种：

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

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

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

### 方式四：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。

<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>
    
    
    <!DOCTYPE html>
    ...
    <script>
      window.name = JSON.stringify({a: 1, b: 2});
    </script>
    </html>

**注意：**

1.  直接嵌入其他域（localhots:10001）下的URL会报错，所以需要加载完成替换为当前域的URL(localhots:10000)，`proxy.html`为空白页面，只为解决该问题；  
    ![跨域请求iframe][iframe]
2.  重新设置src（[http://localhost:10000/proxy.html][http_localhost_10000_proxy.html]）后导致页面不断刷新，所以通过`state`来控制；
3.  全部获取完结果后，清除该iframe。

### 方式五：window.postMessage() ###

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

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

<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>
    
    
    <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][http_localhost_10001]” from accessing a frame with origin “[http://localhost:10000][http_localhost_10000]“. Protocols, domains, and ports must match.

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

### 方式六：修改document.domain跨子域 ###

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

在[根域][Link 1]范围内，允许把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';`设置一致，来达到互相访问的作用。

### 方式七：WebSocket ###

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

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

### 方式八：代理 ###

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

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

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

[JSON]: https://zh.wikipedia.org/wiki/JSON
[script]: https://zh.wikipedia.org/wiki/HTML%E5%85%83%E7%B4%A0#script_tag
[JSONP]: /images/20210606/8d088b87e19644219194bf53f59b9d69.png
[iframe]: /images/20210606/bac1f79df20c4addb1d0e01e6bce7821.png
[http_localhost_10000_proxy.html]: http://localhost:10000/proxy.html
[http_localhost_10001]: http://localhost:10001
[http_localhost_10000]: http://localhost:10000
[Link 1]: https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsIEffectiveTLDService#getBaseDomain.28.29
[WebSocket]: http://blog.csdn.net/ligang2585116/article/details/47259301
[WebSocket-SockJS]: http://blog.csdn.net/ligang2585116/article/details/47277917
[HTTP_HTTPS]: http://blog.csdn.net/ligang2585116/article/details/72827781