跨域资源共享

发布于 2020-07-04 18:14:01   阅读量 45  点赞 0  

跨域资源共享 CORS

 全称跨域资源共享(Cross Origin Resource Sharing),是一个 W3C 的工作草案,定义了访问跨域资源时,浏览器与服务器的沟通方式。CORS同时需要浏览器与服务器的支持。

 整个跨域通信控制过程,都是由浏览器自动完成,无需用户参与。浏览器一旦发现请求跨域,在发送请求时会自动添加一些附加字段。因此跨域通信的关键是服务器,若服务器借口支持跨域,就可以支持跨域通信。CORS标准允许浏览器向跨源服务器发送XMLHttpRequest请求,从而克服了 ajax 只能同源使用的限制。



浏览器的同源策略

 跨域资源共享标准要求对那些可能对服务器数据产生副作用的 HTTP 请求方法,浏览器必须先使用OPTIONS方法发起一个预检请求,从而获知服务器端是否允许该跨域请求,服务器确认允许后,才发起实际的 HTTP 请求。

 一个前端认为只有一个域,当其请求同域名下的服务器时,它的请求是同源的(总被允许的);当它请求其他域名下的服务器时,它的请求是跨域请求(受CORS控制)。



两种请求

 跨域资源请求是通过浏览器设置 HTTP 请求头来标识的,CORS将请求分为两类:简单请求(simple request)和非简单请求(not-simple-request)。其中,简单请求不会触发 CORS 预检操作。

1. 简单请求

简单请求需要同时满足一下两个条件:

  1. 请求方法为以下三种之一:
    • HEAD
    • GET
    • POST

  2. 手动设置的 HTTP 请求头只能为以下字段:
    • Accept
    • Accept-Language
    • Content-Language
    • DPR
    • Downlink
    • Sava-Data
    • Content-Type:只限于三个值 application/x-www-form-urlencodedmultipart/form-datatext/plain


① 基本流程

 对于简单请求,浏览器直接发出CORS请求。具体操作就是,在请求头信息中加一个Origin字段,说明这个请求来自于那个源(协议 + 域名 + 端口),服务器根据这个值,决定是否同意此次跨域请求。

 以上图为例,浏览器发现某次跨源 Ajax 请求是简单请求时,会自动在请求头中添加一个Origin字段:

GET /cors HTTP/1.1
Origin: http://domain-a.com
Host: http://domain-b.com
Accept-Language: en-US
Connection: keep-alive


Orign字段标识了该请求是来自于哪个前端域,服务器会根据Orign字段判断前端域在不在许可范围内。

 若指定的源不在许可范围内,服务器会返回一个正常 HTTP 响应,且不会设置Access-Control-Allow-Orign字段。浏览器发现后会抛出一个错误,并由XMLHttpRequestonerror回调函数捕获。(这种错误无法通过状态码识别,因为服务器返回的响应是正常的200响应;而是由浏览器发现这种错误,并抛出异常)

 若指定的源在许可范围内,服务器返回的响应头中会多出几个与CORS相关的字段:

Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar


 其中:

  1. Access-Control-Allow-Origin
     该字段必须;其值要么为请求时的Origin字段;要么是*,表示接受任意域名的请求;

  2. Access-Control-Allow-Credentials
     该字段可选;它的值是一个布尔值,表示是否允许发送 Cookie。在默认情况下,Cookie 不包含在CORS请求中。该值只能为 true,若设为true,则表示服务器明确许可,Cookie 可以包含在请求中;若服务器不接受浏览器发送 Cookie,则删除该字段即可。

  3. Access-Control-Expose-Headers
     该字段可选;在处理CORS响应时,XMLHttpRequest 对象的getResponseHeader()方法只能得到6个基本字段:Cache-ControlContent-LanguageContent-TypeExpiresLast-ModifiedPragma。若想使得前端能够访问到其他字段,则必须在Access-Control-Expose-Headers字段中指明。上诉例子中,前端可以使用getResponseHeader('FooBar')获取FooBar字段的值。


② withCredentials属性

 上面提到,CORS请求默认不发送 Cookie 与 HTTP 认证信息。若要把 Cookie 发送到服务器,一方面需要服务器同意,指定Access-Control-Allow-Credentials字段为 true:

Access-Control-Allow-Credentials: true

 另一方面,前端需要在 ajax 请求中打开withCredentials属性:

let xhr = new XMLHttpRequest();
xhr.withCredentials = true;

 否则,即使服务器同意发送Cookie,浏览器也不会发送。或者,服务器要求设置Cookie,浏览器也不会处理。

 但是,如果省略withCredentials设置,有的浏览器还是会发送Cookie。这时,可以显式关闭withCredentials。

xhr.withCredentials = false;



2. 非简单请求

 非简单请求指会对服务器数据造成影响的请求如PUTDELETE,或着Content-Type字段类型是application/json

① 预检请求

 非简单请求的CORS请求会在正式通信之前,增加一次 HTTP 查询请求,称为“预检”请求(preflight)。

 浏览器会先询问服务器,当前网页所在域名是否在服务器的许可名单中,以及可以使用哪些 HTTP 请求方法与头信息。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。

例:

let url = 'http://domain-b.com/cros';
let xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send();

 上述代码中,跨域请求方法是PUT,并发送一个自定义信息头X-Custom-Header

 浏览器发现这是一个非简单请求,就自动发出一个“预检”请求,要求服务器确认可以这样请求。下面为一个预检请求的 HTTP 头信息:

OPTIONS /cros HTTP/1.1
Origin: http://domain-a.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: http://domain-b.com
Accept-Language: en-US
Connections: keep-alive
User-Agent: Mozilla/5.0...

 预检请求使用的请求方法是OPTIONS,头信息里,关键的字段是Origin,表示请求来自于哪个源。此外,预检请求的头信息还包括两个特殊字段:

  1. Access-Control-Request-Method
     该字段必须;用来列出浏览器的CORS请求会用到哪些请求方法;

  2. Access-Control-Request-Headers
     该字段为一个以逗号分隔的字符串,指定浏览器CORS请求将会额外发送的头信息字段。上例是 X-Custom-Header


② 预检请求的响应

 服务器收到预检请求,在检查了OriginAccess-Control-Request-MethodAccess-Control-Request-Headers字段后,确认允许跨源请求,就可以做出回应。

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://domain-a.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Encoding: gzip
Content-Length: 0
Content-Type: text/plain

 上述响应中,与CORS有关的头信息字段为:

  1. Access-Control-Allow-Origin
     必须字段;该字段表示 http://domain-a.com 可以请求数据。也可设为*,表示同意任意跨源请求。

  2. Access-Control-Allow-Methods
     必须字段;该字段的值是一个逗号分隔的字符串,表明服务器支持的所有跨域请求方法。且返回的所有支持的方法,而不单是浏览器请求的那个方法,这是为了避免多次预检请求。

  3. Access-Control-Allow-Headers
     如果预检请求头信息中包含Access-Control-Request-Headers字段,则返回的响应中就会含有Access-Control-Allow-Headers字段,它也是一个逗号分隔的字符串,表明服务器支持的所有头信息字段,且不限于浏览器在预检请求中以Access-Control-Request-Headers声明的字段。

  4. Access-Control-Allow-Credentials
     与简单请求中的含义相同。

  5. Access-Control-Max-Age
     可选字段,用来指定本次预检请求的有效期,单位为秒,在此期间,不用再发出另一条预检请求。

     若服务器拒绝了预检请求,会返回正常的 HTTP 响应,但没有任何与 CORS 相关的头信息字段。此时,浏览器会认定服务器不同意预检请求,此时会抛出错误,被XMLHttpRequest对象的onerror回调函数捕获。


③ 正常请求与响应

 一旦通过了预检请求,以后每次浏览器正常的CORS通信,都与简单请求一样。浏览器发送的请求头中都会有一个Origin字段,服务器的响应也都会有一个Access-Control-Allow-Origin头信息字段。


Last Modified : 2020-09-24 14:50:56