HTTP访问控制（CORS）

时间  2019-11-06
标签 http 访问 控制 cors 栏目 HTTP/TCP 繁體版
原文   原文链接

一 前言

今天在开发的时候查看网络请求注意到一个颇有意思的问题：
跨域发送post请求时，老是发送两次，第一次是OPTIONS请求，状态码204；第二次才是POST请求，状态码200.html

这里有和我同样的问题描述：
https://segmentfault.com/q/10...前端

深刻的研究发现，这里面的内容不简单，因此有了下面的文章。ios

二 正文

有一篇权威又详细的讲解，移步这里：HTTP访问控制（CORS）git

好了，咱们正式开始。github

1.问题描述

跨域发送post请求时，老是发送两次，第一次是OPTIONS请求，状态码204；第二次才是POST请求，状态码200json

bVKDLp?w=785&h=266

2.OPTIONS的做用

OPTIONS请求方法的主要用途有两个：axios

（1）获取服务器支持的HTTP请求方法；也是黑客常用的方法。segmentfault

（2）用来检查服务器的性能。例如：AJAX进行跨域请求时的预检，须要向另一个域名的资源发送一个HTTP OPTIONS请求头，用以判断实际发送的请求是否安全。后端

3.为何会这样？

当一个资源从与该资源自己所在的服务器不一样的域或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。跨域

好比，站点http://domain-a.com的某 HTML 页面经过<img>的src请求 http://domain-b.com/image.jpg。网络上的许多页面都会加载来自不一样域的CSS样式表，图像和脚本等资源。

出于安全缘由，浏览器限制从脚本内发起的跨源HTTP请求。 例如，XMLHttpRequest和Fetch API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源，除非使用CORS头文件。
（译者注：这段描述跨域不许确，跨域不必定是浏览器限制了发起跨站请求，而也多是跨站请求能够正常发起，可是返回结果被浏览器拦截了。最好的例子是 CSRF 跨站攻击原理，请求是发送到了后端服务器不管是否跨域！注意：有些浏览器不容许从 HTTPS 的域跨域访问 HTTP，好比 Chrome 和 Firefox，这些浏览器在请求还未发出的时候就会拦截请求，这是一个特例。）

跨域资源共享（ CORS ）机制容许 Web 应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行。浏览器支持在 API 容器中（例如 XMLHttpRequest 或 Fetch ）使用 CORS，以下降跨域 HTTP 请求所带来的风险。

这篇文章适用于网站管理员、后端和前端开发者。CORS 须要客户端和服务器同时支持。目前，全部浏览器都支持该机制。

3-1 概述
跨域资源共享标准新增了一组 HTTP 首部字段，容许服务器声明哪些源站有权限访问哪些资源。另外，规范要求，对那些可能对服务器数据产生反作用的 HTTP 请求方法（特别是 GET 之外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否容许该跨域请求。服务器确认容许以后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也能够通知客户端，是否须要携带身份凭证（包括 Cookies 和 HTTP 认证相关数据）

3-2 简单请求
某些请求不会触发 CORS 预检请求。本文称这样的请求为“简单请求”，请注意，该术语并不属于 Fetch （其中定义了 CORS）规范。若请求知足全部下述条件，则该请求可视为“简单请求”：

1）使用下列方法之一：

GET
HEAD
POST

2）Fetch 规范定义了对 CORS 安全的首部字段集合，不得人为设置该集合以外的其余首部字段。该集合为：

Accept
Accept-Language
Content-Language
Content-Type （须要注意额外的限制）
DPR
Downlink
Save-Data
Viewport-Width
Width

3）Content-Type 的值仅限于下列三者之一：

text/plain
multipart/form-data
application/x-www-form-urlencoded

4）请求中的任意XMLHttpRequestUpload 对象均没有注册任何事件监听器；XMLHttpRequestUpload 对象可使用 XMLHttpRequest.upload 属性访问。
5）请求中没有使用 ReadableStream 对象。

好比说，假如站点http://foo.example的网页应用想要访问http://bar.other的资源。http://foo.example的网页中可能包含相似于下面的 JavaScript 代码：

var invocation = new XMLHttpRequest();
var url = 'http://bar.other/resources/public-data/';
   
function callOtherDomain() {
  if(invocation) {    
    invocation.open('GET', url, true);
    invocation.onreadystatechange = handler;
    invocation.send(); 
  }
}

客户端和服务器之间使用 CORS 首部字段来处理跨域权限：

simple_req.png

分别检视请求报文和响应报文：

GET /resources/public-data/ HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Referer: http://foo.example/examples/access-control/simpleXSInvocation.html
Origin: http://foo.example


HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2.0.61 
Access-Control-Allow-Origin: *
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml

[XML Data]

第 1~10 行是请求首部。第10行 的请求首部字段 Origin 代表该请求来源于 http://foo.exmaple。

第 13~22 行是来自于http://bar.other的服务端响应。响应中携带了响应首部字段 Access-Control-Allow-Origin（第 16 行）。使用 Origin 和 Access-Control-Allow-Origin 就能完成最简单的访问控制。本例中，服务端返回的 Access-Control-Allow-Origin: * 代表，该资源能够被任意外域访问。若是服务端仅容许来自 http://foo.example 的访问，该首部字段的内容以下：

Access-Control-Allow-Origin: http://foo.example

如今，除了http://foo.example，其它外域均不能访问该资源（该策略由请求首部中的 ORIGIN 字段定义，见第10行）。Access-Control-Allow-Origin 应当为 * 或者包含由 Origin 首部字段所指明的域名。

3-3 预检请求
与前述简单请求不一样，“需预检的请求”要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器，以获知服务器是否容许该实际请求。"预检请求“的使用，能够避免跨域请求对服务器的用户数据产生未预期的影响。

当请求不是简单请求时，即发送预检请求。

以下是一个须要执行预检请求的 HTTP 请求：

var invocation = new XMLHttpRequest();
var url = 'http://bar.other/resources/post-here/';
var body = '<?xml version="1.0"?><person><name>Arun</name></person>';
    
function callOtherDomain(){
  if(invocation)
    {
      invocation.open('POST', url, true);
      invocation.setRequestHeader('X-PINGOTHER', 'pingpong');
      invocation.setRequestHeader('Content-Type', 'application/xml');
      invocation.onreadystatechange = handler;
      invocation.send(body); 
    }
}

......

上面的代码使用 POST 请求发送一个 XML 文档，该请求包含了一个自定义的请求首部字段（X-PINGOTHER: pingpong）。另外，该请求的 Content-Type 为 application/xml。所以，该请求须要首先发起“预检请求”。

prelight.png

1.OPTIONS /resources/post-here/ HTTP/1.1
 2.Host: bar.other
 3.User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
 4.Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
 5.Accept-Language: en-us,en;q=0.5
 6.Accept-Encoding: gzip,deflate
 7.Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
 8.Connection: keep-alive
 9.Origin: http://foo.example
10.Access-Control-Request-Method: POST
11.Access-Control-Request-Headers: X-PINGOTHER, Content-Type
12.
13.
14.HTTP/1.1 200 OK
15.Date: Mon, 01 Dec 2008 01:15:39 GMT
16.Server: Apache/2.0.61 (Unix)
17.Access-Control-Allow-Origin: http://foo.example
18.Access-Control-Allow-Methods: POST, GET, OPTIONS
19.Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
20.Access-Control-Max-Age: 86400
21.Vary: Accept-Encoding, Origin
22.Content-Encoding: gzip
23.Content-Length: 0
24.Keep-Alive: timeout=2, max=100
25.Connection: Keep-Alive
26.Content-Type: text/plain

预检请求完成以后，发送实际请求：

POST /resources/post-here/ HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
X-PINGOTHER: pingpong
Content-Type: text/xml; charset=UTF-8
Referer: http://foo.example/examples/preflightInvocation.html
Content-Length: 55
Origin: http://foo.example
Pragma: no-cache
Cache-Control: no-cache

<?xml version="1.0"?><person><name>Arun</name></person>


HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:40 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://foo.example
Vary: Accept-Encoding, Origin
Content-Encoding: gzip
Content-Length: 235
Keep-Alive: timeout=2, max=99
Connection: Keep-Alive
Content-Type: text/plain

[Some GZIP'd payload]

浏览器检测到，从 JavaScript 中发起的请求须要被预检。从上面的报文中，咱们看到，第 1~12 行发送了一个使用 OPTIONS 方法的“预检请求”。 OPTIONS 是 HTTP/1.1 协议中定义的方法，用以从服务器获取更多信息。该方法不会对服务器资源产生影响。 预检请求中同时携带了下面两个首部字段：

Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type

首部字段 Access-Control-Request-Method 告知服务器，实际请求将使用 POST 方法。
首部字段 Access-Control-Request-Headers 告知服务器，实际请求将携带两个自定义请求首部字段：X-PINGOTHER 与 Content-Type。服务器据此决定，该实际请求是否被容许。

第14~26 行为预检请求的响应，代表服务器将接受后续的实际请求。重点看第 17~20 行：

Access-Control-Allow-Origin: http://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400

首部字段 Access-Control-Allow-Methods 代表服务器容许客户端使用 POST, GET 和 OPTIONS 方法发起请求。该字段与 HTTP/1.1 Allow: response header 相似，但仅限于在须要访问控制的场景中使用。

首部字段 Access-Control-Allow-Headers 代表服务器容许请求中携带字段 X-PINGOTHER 与 Content-Type。与 Access-Control-Allow-Methods 同样，Access-Control-Allow-Headers 的值为逗号分割的列表。

最后，首部字段 Access-Control-Max-Age 代表该响应的有效时间为 86400 秒，也就是 24 小时。在有效时间内，浏览器无须为同一请求再次发起预检请求。请注意，浏览器自身维护了一个最大有效时间，若是该首部字段的值超过了最大有效时间，将不会生效。

3-4 预检请求与重定向
大多数浏览器不支持针对于预检请求的重定向。若是一个预检请求发生了重定向，浏览器将报告错误：

The request was redirected to 'https://example.com/foo', which is disallowed for cross-origin requests that require preflight

Request requires preflight, which is disallowed to follow cross-origin redirect

CORS 最初要求该行为，不过在后续的修订中废弃了这一要求。

在浏览器的实现跟上规范以前，有两种方式规避上述报错行为：

在服务端去掉对预检请求的重定向；
将实际请求变成一个简单请求。

若是上面两种方式难以作到，咱们仍有其余办法：

发出一个简单请求（使用  Response.url 或 XHR.responseURL）以判断真正的预检请求会返回什么地址。
发出另外一个请求（真正的请求），使用在上一步经过Response.url 或 XMLHttpRequest.responseURL得到的URL。

不过，若是请求是因为存在 Authorization 字段而引起了预检请求，则这一方法将没法使用。这种状况只能由服务端进行更改。

3-5 附带身份凭证的请求
Fetch 与 CORS 的一个有趣的特性是，能够基于 HTTP cookies 和 HTTP 认证信息发送身份凭证。通常而言，对于跨域 XMLHttpRequest 或 Fetch 请求，浏览器不会发送身份凭证信息。若是要发送凭证信息，须要设置 XMLHttpRequest 的某个特殊标志位。

本例中，http://foo.example 的某脚本向 http://bar.other 发起一个GET 请求，并设置 Cookies：

var invocation = new XMLHttpRequest();
var url = 'http://bar.other/resources/credentialed-content/';
    
function callOtherDomain(){
  if(invocation) {
    invocation.open('GET', url, true);
    invocation.withCredentials = true; // important
    invocation.onreadystatechange = handler;
    invocation.send(); 
  }
}

第 7 行将 XMLHttpRequest 的 withCredentials 标志设置为 true，从而向服务器发送 Cookies。由于这是一个简单 GET 请求，因此浏览器不会对其发起“预检请求”。可是，若是服务器端的响应中未携带 Access-Control-Allow-Credentials: true ，浏览器将不会把响应内容返回给请求的发送者。

cred-req.png
客户端与服务器端交互示例以下：

GET /resources/access-control-with-credentials/ HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Referer: http://foo.example/examples/credential.html
Origin: http://foo.example
Cookie: pageAccess=2


HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:34:52 GMT
Server: Apache/2.0.61 (Unix) PHP/4.4.7 mod_ssl/2.0.61 OpenSSL/0.9.7e mod_fastcgi/2.4.2 DAV/2 SVN/1.4.2
X-Powered-By: PHP/5.2.6
Access-Control-Allow-Origin: http://foo.example
Access-Control-Allow-Credentials: true
Cache-Control: no-cache
Pragma: no-cache
Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT
Vary: Accept-Encoding, Origin
Content-Encoding: gzip
Content-Length: 106
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain


[text/plain payload]

即便第 11 行指定了 Cookie 的相关信息，可是，若是 bar.other 的响应中缺失 Access-Control-Allow-Credentials: true（第 19 行），则响应内容不会返回给请求的发起者。

3-6 附带身份凭证的请求与通配符
对于附带身份凭证的请求，服务器不得设置 Access-Control-Allow-Origin 的值为“*”。

这是由于请求的首部中携带了 Cookie 信息，若是 Access-Control-Allow-Origin 的值为“*”，请求将会失败。而将 Access-Control-Allow-Origin 的值设置为 http://foo.example，则请求将成功执行。

另外，响应首部中也携带了 Set-Cookie 字段，尝试对 Cookie 进行修改。若是操做失败，将会抛出异常。

4.HTTP 响应首部字段

Access-Control-Allow-Origin
响应首部中能够携带一个 Access-Control-Allow-Origin 字段，其语法以下:

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

其中，origin 参数的值指定了容许访问该资源的外域 URI。对于不须要携带身份凭证的请求，服务器能够指定该字段的值为通配符，表示容许来自全部域的请求。

例如，下面的字段值将容许来自 http://mozilla.com 的请求：

Access-Control-Allow-Origin: http://mozilla.com

若是服务端指定了具体的域名而非“*”，那么响应首部中的 Vary 字段的值必须包含 Origin。这将告诉客户端：服务器对不一样的源站返回不一样的内容。

Access-Control-Expose-Headers
译者注：在跨域访问时，XMLHttpRequest对象的getResponseHeader()方法只能拿到一些最基本的响应头，Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma，若是要访问其余头，则须要服务器设置本响应头。

Access-Control-Expose-Headers 头让服务器把容许浏览器访问的头放入白名单，例如：

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

这样浏览器就可以经过getResponseHeader访问X-My-Custom-Header和 X-Another-Custom-Header 响应头了。

Access-Control-Max-Age
Access-Control-Max-Age 头指定了preflight请求的结果可以被缓存多久，请参考本文在前面提到的preflight例子。

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

delta-seconds 参数表示preflight请求的结果在多少秒内有效。

Access-Control-Allow-Credentials
Access-Control-Allow-Credentials 头指定了当浏览器的credentials设置为true时是否容许浏览器读取response的内容。当用在对preflight预检测请求的响应中时，它指定了实际的请求是否可使用credentials。请注意：简单 GET 请求不会被预检；若是对此类请求的响应中不包含该字段，这个响应将被忽略掉，而且浏览器也不会将相应内容返回给网页。

Access-Control-Allow-Credentials: true

上文已经讨论了附带身份凭证的请求。

Access-Control-Allow-Methods
Access-Control-Allow-Methods 首部字段用于预检请求的响应。其指明了实际请求所容许使用的 HTTP 方法。

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

相关示例见这里。

Access-Control-Allow-Headers
Access-Control-Allow-Headers 首部字段用于预检请求的响应。其指明了实际请求中容许携带的首部字段。

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

5.HTTP 请求首部字段

本节列出了可用于发起跨域请求的首部字段。请注意，这些首部字段无须手动设置。 当开发者使用 XMLHttpRequest 对象发起跨域请求时，它们已经被设置就绪。

Origin
Origin 首部字段代表预检请求或实际请求的源站。

Origin: <origin>

origin 参数的值为源站 URI。它不包含任何路径信息，只是服务器名称。

Note: 有时候将该字段的值设置为空字符串是有用的，例如，当源站是一个 data URL 时。
注意，不论是否为跨域请求，ORIGIN 字段老是被发送。

Access-Control-Request-Method
Access-Control-Request-Method 首部字段用于预检请求。其做用是，将实际请求所使用的 HTTP 方法告诉服务器。

Access-Control-Request-Method: <method>

相关示例见这里。

Access-Control-Request-Headers
Access-Control-Request-Headers 首部字段用于预检请求。其做用是，将实际请求所携带的首部字段告诉服务器。

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

6.从axios库再看预检

defaults.js
axios/lib/defaults.js源码里面有这样一段代码：

var defaults = {
  adapter: getDefaultAdapter(),

  transformRequest: [function transformRequest(data, headers) {
    normalizeHeaderName(headers, 'Content-Type');
    if (utils.isFormData(data) ||  // FormData
      utils.isArrayBuffer(data) || // ArrayBuffer
      utils.isBuffer(data) ||    // Buffer
      utils.isStream(data) ||    // Stream
      utils.isFile(data) ||    // File
      utils.isBlob(data)        // Blob
    ) {
      return data;
    }
    if (utils.isArrayBufferView(data)) {
      return data.buffer;
    }
    if (utils.isURLSearchParams(data)) {
      setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
      return data.toString();
    }
    if (utils.isObject(data)) {
      setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
      return JSON.stringify(data);
    }
    return data;
  }],

这里有三个重要的函数：
（1）utils.isURLSearchParams(data)：判断data是不是window.URLSearchParams的实例
（2）utils.isObject(data)：判断data是不是个object(不包含null)
（3）setContentTypeIfUnset：若是没有手动定义过content-type值就执行一些操做

总结：

1.一般咱们不会将数据转成二进制(ArrayBuffer、Buffer、Blob、Stream)以后再发送给服务器，若是也不是File、FormData类型这样的话只存在utils.isURLSearchParams和utils.isObject两种状况；

2.咱们知道当content-type:application/json使用COSR跨域请求时会触发预检，因此若是咱们没有本身手动设置过content-type值，而且data是个对象类型，那么就会触发预检。

三 后记

在这篇文章中，咱们知道了：

1.什么是简单请求和复杂请求？
2.什么是预检，什么状况下会预检？
3.怎样预检？
4.axios和预检？

预检会多发一次请求，如何权衡使用content-type避免复杂请求和方便的传递数据之间的利弊是一个值得咱们思考的问题。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程