# CORS 首先我们需要知道，浏览器其实并不拦截不合法的跨域请求，只是拦截了他们的响应，因此即使请求不合法，很多时候服务器依然会收到请求。 ## 与CORS有关的headers #### HTTP Response Header(服务器提供): * Access-Control-Allow-Origin: 指定允许哪些源的网页发送请求. * Access-Control-Allow-Credentials: 指定是否允许cookie发送. * Access-Control-Allow-Methods: 指定允许哪些请求方法. * Access-Control-Allow-Headers: 指定允许哪些常规的头域字段, 比如说 Content-Type. * Access-Control-Expose-Headers: 指定允许哪些额外的头域字段, 比如说 X-Custom-Header.该字段可省略. CORS请求时, xhr.getResponseHeader() 方法默认只能获取6个基本字段: Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma . 如果需要获取其他字段, 就需要在Access-Control-Expose-Headers 中指定. 如上, 这样xhr.getResponseHeader('X-Custom-Header') 才能返回X-Custom-Header字段的值.(该部分摘自阮一峰老师博客) * Access-Control-Max-Age: 指定preflight OPTIONS请求的有效期, 单位为秒. #### HTTP Request Header(浏览器OPTIONS请求默认自带): * Access-Control-Request-Method: 告知服务器,浏览器将发送哪种请求, 比如说POST. * Access-Control-Request-Headers: 告知服务器, 浏览器将包含哪些额外的头域字段. ## CORS 请求 #### 简单请求 > CORS请求分为两种，简单请求与非简单请求。 满足一下两个条件便是简单请求，反之为非简单请求。 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 > 对于简单请求, 浏览器将发送一次http请求, 同时在Request头域中增加 Origin 字段, 用来标示请求发起的源, 服务器根据这个源采取不同的响应策略. 若服务器认为该请求合法, 那么需要往返回的 HTTP Response 中添加 Access-Control-* 等字段.( Access-Control-* 相关字段解析请阅读我之前写的CORS 跨域访问 ) #### 非简单请求 比如说最常见的 POST ContentType为application/json请求，浏览器会发起两次http请求，第一次为perflight预检（Method:OPTIONS），主要用于验证来源是否合法，第二次是真正的http请求。 ## HTML启用CORS ~~~ <meta http-equiv="Access-Control-Allow-Origin" content="*"> ~~~