乐趣区

八种方式实现跨域请求

jiezi

浏览器的同源策略

提到跨域不能不先说一下”同源策略”。
​
何为同源？只有当协议、端口、和域名都相同的页面，则两个页面具有相同的源。只要网站的 协议名 protocol、主机 host、端口号 port 这三个中的任意一个不同，网站间的数据请求与传输便构成了跨域调用，会受到同源策略的限制。

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。浏览器的同源策略，出于防范跨站脚本的攻击，禁止客户端脚本（如 JavaScript）对不同域的服务进行跨站调用（通常指使用 XMLHttpRequest 请求）。

跨域请求方式

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

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

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

方式二：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 是从其他域中加载代码执行，容易受到跨站请求伪造的攻击，其安全性无法确保

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

<!-- 
 下述用端口 
 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>

注意：

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

方式五：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 跨域请求。

方式六：修改 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’; 设置一致，来达到互相访问的作用。

方式七：WebSocket

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

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

方式八：代理

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

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

退出移动版