HTTP访问控制(CORS)

Access-Control-Allow-Origin:'target='_blank'>http://foo.example[/code]
现在，除了http://foo.example，其它站点就不能跨站访问http://bar.other的资源了（在请求头里ORIGIN中定义，见上述第10行）。
Access-Control-Allow-Origin
需要为*或者包含由Origin指明的站点。

预请求
不同于上面讨论的简单请求，“预请求”要求必须先发送一个
OPTIONS
方法请求给目的站点，来查明这个跨站请求对于目的站点是不是安全的可接受的。这样做，是因为跨站请求可能会对目的站点的数据产生影响。当请求具备以下条件，就会被当成预请求处理：

使用下述方法以外的请求：

GET


HEAD


POST


除了用户代理自动设置的头部外（比如
Connection
，
User-Agent
，或者其他任意的Fetch规范定义的“禁止的头部名”），预请求不包括Fetch规范定义的“CORS-safelistedrequest-header”：

Accept


Accept-Language


Content-Language


Content-Type
(butnotetheadditionalrequirementsbelow)

DPR


Downlink


Save-Data


Viewport-Width


Width


Content-Type
头部的值除了下列之外的:

application/x-www-form-urlencoded


multipart/form-data


text/plain


注意:WebKitNightly和SafariTechnologyPreview添加了额外的限制在
Accept
,
Accept-Language
,and
Content-Language
头部的值。如果这些头部的值是非标准的，WebKit/Safari就不会将这些请求视为“简单请求”。WebKit/Safari并没有将非标准的头部值列个文档出来，但是可以在WebKitbug里体现：Requirepreflightfornon-standardCORS-safelistedrequestheadersAccept,Accept-Language,andContent-Language,AllowcommasinAccept,Accept-Language,andContent-LanguagerequestheadersforsimpleCORS,andSwitchtoablacklistmodelforrestrictedAcceptheadersinsimpleCORSrequests。其它的浏览器并没有这个限制的实现，因为这个不在规范的内容里。

示例如下：

varinvocation=newXMLHttpRequest();
varurl='http://bar.other/resources/post-here/';
varbody='<?xmlversion="1.0"?><person><name>Arun</name></person>';

functioncallOtherDomain(){
if(invocation)
{
invocation.open('POST',url,true);
invocation.setRequestHeader('X-PINGOTHER','pingpong');
invocation.setRequestHeader('Content-Type','application/xml');
invocation.onreadystatechange=handler;
invocation.send(body);
}
}

......

如上，以XMLHttpRequest创建了一个POST请求，为该请求添加了一个自定义请求头(X-PINGOTHER:pingpong)，并指定数据类型为application/xml。所以，该请求是一个“预请求”形式的跨站请求。

让我们看看服务器与浏览器之间具体的交互过程：



[code;'>OPTIONS/resources/post-here/HTTP/1.1
Host:bar.other
User-Agent:Mozilla/5.0(Macintosh][code=language-html]Access-Control-Request-Method:POST
Access-Control-Request-Headers:X-PINGOTHER

请求头Access-Control-Request-Method

将使用POST方法，而请求头

X-PINGOTHER。这样，服务器就可以决定，在当前情况下，是否接受该跨站请求访问。

Access-Control-Allow-Origin:http://foo.exampleAccess-Control-Allow-Methods:POST,GET,OPTIONS
Access-Control-Allow-Headers:X-PINGOTHER
Access-Control-Max-Age:1728000

Access-Control-Allow-Methods表明服务器可以接受

POST

GET和

OPTIONS

Access-Control-Allow-Headers则表示服务器接受自定义请求头X-PINGOTHER。

XMLHttpRequest

XMLHttpRequest

http://foo.example站点的脚本向http://bar.other站点发送一个GET请求，并设置了一个Cookies

withCredentials标志设置为true，

Access-Control-Allow-Credentials:true的响应头，那么浏览器将不会把响应结果传递给发出请求的脚本程序，以保证信息的安全。

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

Access-Control-Allow-Origin:'target='_blank'>http://mozilla.com[/code]如果服务器端指定了域名,而不是'*',那么响应头的Vary值里必须包含Origin.它告诉客户端:响应是根据请求头里的Origin的值来返回不同的内容的.

Access-Control-Expose-Headers
RequiresGecko2.0(Firefox4/Thunderbird3.3/SeaMonkey2.1)

设置浏览器允许访问的服务器的头信息的白名单:

Access-Control-Expose-Headers:X-My-Custom-Header,X-Another-Custom-Header

这样,
X-My-Custom-Header
和
X-Another-Custom-Header这两个头信息,都可以被浏览器得到.


Access-Control-Max-Age
这个头告诉我们这次预请求的结果的有效期是多久,如下:

Access-Control-Max-Age:<delta-seconds>

delta-seconds
参数表示,允许这个预请求的参数缓存的秒数,在此期间,不用发出另一条预检请求.

Access-Control-Allow-Credentials
告知客户端,当请求的credientials属性是true的时候,响应是否可以被得到.当它作为预请求的响应的一部分时,它用来告知实际的请求是否使用了credentials.注意,简单的GET请求不会预检,所以如果一个请求是为了得到一个带有credentials的资源,而响应里又没有Access-Control-Allow-Credentials头信息,那么说明这个响应被忽略了.

Access-Control-Allow-Credentials:true|false

带有credential的请求在上面讨论.

Access-Control-Allow-Methods
指明资源可以被请求的方式有哪些(一个或者多个).这个响应头信息在客户端发出预检请求的时候会被返回.上面有相关的例子.

Access-Control-Allow-Methods:<method>[,<method>]*

发出预检请求的例子见上,这个例子里就有向客户端发送Access-Control-Allow-Methods响应头信息.

Access-Control-Allow-Headers
也是在响应预检请求的时候使用.用来指明在实际的请求中,可以使用哪些自定义HTTP请求头.比如

Access-Control-Allow-Headers:X-PINGOTHER

这样在实际的请求里,请求头信息里就可以有这么一条:

[code;'>X-PINGOTHER:pingpong

Access-Control-Allow-Headers:<]>[,<field-name>]*

Origin:<origin>

Access-Control-Request-Method:<method>

Access-Control-Request-Headers:<field-name>[,<field-name>]*

XMLHttpRequest

XMLHttpRequest