浏览器跨域

同源策略:

• 同源指的是我们访问站点的：协议、域名、端口号必须一至，才叫同源。
• 浏览器默认同源之间的站点是可以相互访问资源和操作DOM的，而不同源之间想要互相访问资源或者操作DOM，那就需要加一些安全策略的限制，俗称同源策略
• 同源策略主要限制了三个方面：
  • DOM层面：不同源站点之间不能相互访问和操作DOM
  • 数据层面：不能获取不同源站点的Cookie、LocalStorage、indexDB等数据
  • 网络层面：不能通过XMLHttpRequest向不同源站点发送请求

当然同源策略限制也不是绝对隔离不同源的站点，比如link、img、script标签都没有跨域限制，这让我们开发更灵活了

CORS跨域

• CORS需要浏览器和服务器同时支持
• 如果是跨域，浏览器一定会先有一个预请求OPTIONS。
• 浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）

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 （不包括application/json）
1
2
3
4
5
6
7
8
9

简单请求：浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个Origin字段

• Origin字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。

GET /cors HTTP/1.1 
Origin: http://api.bob.com 
Host: api.alice.com
1
2
3

• 如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应。浏览器发现，这个回应的头信息没有包含Access-Control-Allow-Origin字段，就知道出错了，从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。注意，这种错误无法通过状态码识别，因为HTTP回应的状态码有可能是200。
• 如果Origin指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段。

Access-Control-Allow-Origin: http://api.bob.com //表示接受哪些域名的请求
Access-Control-Allow-Credentials: true  //表示是否允许发送Cookie
Access-Control-Expose-Headers: FooBar 
//CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。
//如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader('FooBar')可以返回FooBar字段的值

1
2
3
4
5
6

非简单请求：

• 预检请求OPTIONS：比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）
  • 浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP请求头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错

var url = 'http://api.alice.com/cors'; 
var xhr = new XMLHttpRequest(); 
xhr.open('PUT', url, true); 
xhr.setRequestHeader('X-Custom-Header', 'value'); 
xhr.send();

//"预检"请求的HTTP头信息:
OPTIONS /cors HTTP/1.1 Origin: http://api.bob.com 
Access-Control-Request-Method: PUT 
//指定浏览器CORS请求会额外发送的头信息字段
Access-Control-Request-Headers: X-Custom-Header

1
2
3
4
5
6
7
8
9
10
11
12

• 服务器收到"预检"请求以后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，就可以做出回应。

Access-Control-Allow-Origin: http://api.bob.com 
Access-Control-Allow-Methods: GET, POST, PUT 
Access-Control-Allow-Headers: X-Custom-Header
1
2
3

• 如果服务器否定了"预检"请求，会返回一个正常的HTTP回应，但是没有任何CORS相关的头信息字段。这时，浏览器就会认定，服务器不同意预检请求，因此触发一个错误，被XMLHttpRequest对象的onerror回调函数捕获。

预检测之后

• 一旦服务器通过了"预检"请求，以后每次浏览器正常的CORS请求，就都跟简单请求一样，会有一个Origin头信息字段。服务器的回应，也都会有一个Access-Control-Allow-Origin头信息字段。