前端网络高级篇（四）CORS 跨域

学习CORS之前，先看下如下问题，作为铺垫和准备。

问题1: 什么是跨域？

满足下面三个条件才会引发跨域问题：

1. 浏览器限制： 出于安全考虑，浏览器会限制脚本中发起的跨域请求（浏览器对于javascript的同源策略的限制）
2. 同源策略： 只要 协议，域名，端口有任何一个的不同，就被当作是跨域
3. 请求类型： XMLHttpRequest类型请求

问题2: 为什么要有跨域限制？

AJAX同源策略主要用来防止CSRF攻击。如果没有AJAX同源策略，相当危险，我们发起的每一次HTTP请求都会带上请求地址对应的cookie，那么可以做如下攻击：

1. 用户登录了自己的银行页面 http://mybank.com，http://mybank.com 向用户的cookie中添加用户标识。
2. 用户浏览了恶意页面 http://evil.com 。执行了页面中的恶意AJAX请求代码。
3. http://evil.com 向http://mybank.com 发起AJAX HTTP请求，请求会默认把http://mybank.com 对应cookie也同时发送过去。
4. 银行页面从发送的cookie中提取用户标识，验证用户无误，response中返回请求数据。此时数据就泄露了。
5. 而且由于Ajax在后台执行，用户无法感知这一过程

问题3:为什么表单请求可以跨域

A页面（域名A）用 form 提交表单到B页面（域名B），A页面的脚本无法获取B页面中的内容，无法获得响应，浏览器认为是安全的。 其实，请求已经发送出去了，只是拿不到响应而已，AJAX 接收方可以读取响应内容的。所以，利用这个特性，依然有可能发起CSRF攻击。

问题4: 如何解决跨域问题？

• 方式一：jsonp 浏览器对资源文件的请求不限制同源，比如a.com下的页面可以通过标签<script src="b.com/b.js">, <img src="b.com/b.png"/>引入b.com域名下的JavaScript文件或者图片。 jsonp就是动态创建script标签，然后利用src属性进行跨域的。

// 定义一个fun函数
function foo (data) {
    console.log(data);
};
// 创建一个脚本，并且告诉后端回调函数名叫foo
var body = document.getElementsByTagName('body')[0];
var script = document.gerElement('script');
script.type = 'text/javasctipt';
script.src = 'demo.js?callback=foo';
body.appendChild(script);

服务器接收到请求完成操作后，会调用callback函数（执行foo）。 jsonp的缺点是：只能发起GET请求。因为，请求资源文件默认都是GET请求。

• 方式二：服务器代理 客户端发起请求到同源的代理服务器，然后代理服务器再将请求转发给真正的服务器。常见利用Node.js作为代理服务器。
• 方式三：document.domain来跨子域（不常用） 对于主域名相同，而子域名不同的情况，可以使用document.domain来跨域。这种方式非常适用于iframe。比如a页面地址为 http://a.yourhost.com，b页面为 http://b.yourhost.com。 这样就可以通过分别给两个页面设置 document.domain = http://yourhost.com 来实现跨域。之后，就可以通过 parent 或者 window[‘iframename’]等方式去拿到iframe的window对象了。
• 方式四：postMessage实现页面之间通信（不常用） window.postMessage是一个HTML5的api，允许两个窗口之间进行跨域发送消息。
• 方式五：websocket Websocket是HTML5的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案。WebSocket和HTTP都是应用层协议，都基于 TCP 协议。但是 WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据。同时，WebSocket 在建立连接时需要借助 HTTP 协议，连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。
• 方式五：CORS跨域

下面，详细讲解CORS跨域。

CORS(Cross-Origin Resource Sharing)

隶属于 W3C 的 Web 应用工作组( Web Applications Working Group )推荐了一种新的机制，即跨源资源共享（Cross-Origin Resource Sharing (CORS)）。这种机制让Web应用服务器能支持跨站访问控制，从而使得安全地进行跨站数据传输成为可能。

CORS 请求头

CORS的请求有个明显标示，response header里面带有Access-Control-Allow-Origin字段。

Access-Control-Allow-Origin: <origin> | *

origin参数指定一个允许向该服务器提交请求的URI。对于一个不带有credentials的请求，可以指定为'*'，表示允许来自所有域的请求。 还可以指定具体的域，比如:

Access-Control-Allow-Origin: http://mozilla.com

如果服务器端指定了域名，而不是'*'，那么请求头必须包含Origin。响应是根据请求头里的Origin的值来返回不同的内容的。

CORS的response里面还包含几个特殊的请求头：

• access-control-allow-methods：支持的HTTP请求方法
• access-control-allow-headers：支持的request header类型，包括自定义header。
• access-control-allow-credentials：是否支持携带cookies（后面会详细讲解）

下面，我们具体分析下CORS支持的几种请求方式。

1. 简单请求

简单请求具备以下条件：

• 只使用 GET, HEAD 或者 POST 请求方法。
• 如果使用 POST 向服务器端传送数据，则数据类型(Content-Type)只能是application/x-www-form-urlencoded, multipart/form-data 或 text/plain中的一种。
• 不使用自定义请求头（类似于 X-Modified 这种）。

如果服务器端仅允许来自 http://foo.example 的跨站请求，它可以返回：

Access-Control-Allow-Origin: http://foo.example

2. 预请求(Preflighted requests)

“预请求”要求必须先发送一个 OPTIONS 请求给目的站点，来查明这个跨站请求对于目的站点是不是安全可接受的。这样做，是因为跨站请求可能会对目的站点的数据造成破坏。 当请求具备以下条件，就会被当成预请求处理：

• 请求以 GET, HEAD 或者 POST 以外的方法发起请求。
• 使用 POST，但请求数据为application/x-www-form-urlencoded, multipart/form-data 或者 text/plain 以外的数据类型。比如说，用 POST 发送数据类型为application/xml或者text/xml的 XML 数据的请求。
• 使用自定义请求头（比如添加诸如 X-PINGOTHER）

发起OPTIONS请求

预检成功后发起GET请求

3. 3.附带凭证信息的请求(support cookies)

如果request请求要支持HTTP Cookies和验证信息，那么，XMLHttpRequest需要将withCredentials属性设置为true，而response需要返回Access-Control-Allow-Credentials: true。

前端代码如下：

// JS
var invocation = new XMLHttpRequest();
var url = 'http://bar.other/resources/credentialed-content/';
    
function callOtherDomain(){
  if(invocation) {
    invocation.open('GET', url, true);
    invocation.withCredentials = true;   // 设置
    invocation.onreadystatechange = handler;
    invocation.send(); 
  }
  
// JQuery
 $.ajax({
   ...
   url: a_cross_domain_url,
   xhrFields: {
      withCredentials: true
   }
 }); 

小结

目前最流行的跨域方式就是CORS了，需要服务端做相应配置，前端各类HTTP框架都支持了CORS机制。比如常用的axios库，可以通过全局配置指定CORS相关属性。

axios.defaults.timeout = 10000;
axios.defaults.withCredentials = true;