浏览器同源策略

参考：

1. 浏览器同源政策及其规避方法
2. 跨域资源共享 CORS 详解
3. cookie详解

什么为同源？

• 协议相同
• 域名相同
• 端口相同

举例来说，http://www.example.com/dir/page.html这个网址，协议是http://，域名是www.example.com，端口是80（默认端口可以省略）。它的同源情况如下：

• http://www.example.com/dir2/other.html：同源
• http://example.com/dir/other.html：不同源（域名不同）
• http://v2.www.example.com/dir/other.html：不同源（域名不同）
• http://www.example.com:81/dir/other.html：不同源（端口不同）

限制范围

• Cookie、LocalStorage 和 IndexDB 无法读取。

• DOM 无法获得。

• AJAX 请求不能发送。

Cookie详解

如何跨域使用呢？

• 仅子域名不一致的，设置 domain 为共同的那个域名。 JS中可以使用document.domain = 'example.com'; 设置为一级域名相同。
• 域名一致的，将 path 设置为 /, 即该域名下的所有都可以访问。

ajax跨域

1. JSONP解决办法

   浏览器对于script，iframe等标签的src等属性，是没有同源策略限制的。而jsonp就很好的利用了这一点～在我们发起请求时，url后跟了一个名为func的参数，而这个参数就是之后需要用到的回调函数名称。

2. CORS解决办法

什么是CORS？

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

具体实现

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

1. 简单请求

    1. 请求方法是以下三种方法之一：
    
    	+ HEAD
    	+ GET
    	+ POST
    	
    2. HTTP的头信息不超出以下几种字段：
    
    	+ Accept
    	+ Accept-Language
    	+ Content-Language
    	+ Last-Event-ID
    	+ Content-Type：只限于三个值`application/x-www-form-urlencoded`、`multipart/form-data`、`text/plain`
   
     凡是不同时满足上面两个条件，就属于非简单请求。
   

   请求过程如下：

   1. 对于简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个Origin字段。
    
       如 `Origin: http://api.bob.com`
   
   2. 服务器端可以设置`Access-Control-Allow-Origin`字段来，如果为"*"为所有域名都可以
   
   3. Access-Control-Allow-Credentials：该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。（**服务器端通过这个设置客户端才能发送cookie**）   
   JS 通过以下语句进行设置（**JS有的浏览器必须设置了才能发送，有些浏览器不设置也能发送**）：
   
    var xhr = new XMLHttpRequest();
    xhr.withCredentials = true; //或者为false
   
   4. Access-Control-Expose-Headers：该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader('FooBar')可以返回FooBar字段的值。
   

2. 非简单请求

   请求过程如下：

   1. 首先进行一次预检，"预检"请求用的请求方法是OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是Origin，表示请求来自哪个源。

   2. 非简单请求中的额外请求以及额外请求method通过预检以后，正式发送http请求。

   3. Access-Control-Max-Age：设置本次预检的有效期