跨源资源共享（CORS）

最新推荐文章于 2023-05-11 08:51:06 发布
最新推荐文章于 2023-05-11 08:51:06 发布
阅读量793 收藏
点赞数 1
分类专栏： 浏览器跨域
原文链接：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS#
版权

跨源资源共享 (CORS) （或通俗地译为跨域资源共享）是一种基于HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它origin（域，协议和端口），这样浏览器可以访问加载这些资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的"预检"请求。在预检中，浏览器发送的头中标示有HTTP方法和真实请求中会用到的头。

跨源HTTP请求的一个例子：运行在 http://domain-a.com 的JavaScript代码使用XMLHttpRequest来发起一个到 https://domain-b.com/data.json 的请求。

出于安全性，浏览器限制脚本内发起的跨源HTTP请求。 例如，XMLHttpRequest和Fetch API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源，除非响应报文包含了正确CORS响应头。

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

谁应该读这篇文章？

说实话，每个人。

更具体地来讲，这篇文章适用于网站管理员、后端和前端开发者。现代浏览器处理跨源资源共享的客户端部分，包括HTTP头和相关策略的执行。但是这一新标准意味着服务器需要处理新的请求头和响应头。对于服务端的支持，开发者可以阅读补充材料 cross-origin sharing from a server perspective (with PHP code snippets) 。

什么情况下需要 CORS ？

这份 cross-origin sharing standard 允许在下列场景中使用跨站点 HTTP 请求：

本文概述了跨源资源共享机制及其所涉及的 HTTP 头。

功能概述

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

CORS请求失败会产生错误，但是为了安全，在JavaScript代码层面是无法获知到底具体是哪里出了问题。你只能查看浏览器的控制台以得知具体是哪里出现了错误。

接下来的内容将讨论相关场景，并剖析该机制所涉及的 HTTP 首部字段。

若干访问控制场景

这里，我们使用三个场景来解释跨源资源共享机制的工作原理。这些例子都使用 XMLHttpRequest 对象。

本文中的 JavaScript 代码片段都可以从 http://arunranga.com/examples/access-control/ 获得。另外，使用支持跨源  XMLHttpRequest 的浏览器访问该地址，可以看到代码的实际运行结果。

关于服务端对跨源资源共享的支持的讨论，请参见这篇文章： Server-Side_Access_Control (CORS)。

简单请求

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

注意: 这些跨站点请求与浏览器发出的其他跨站点请求并无二致。如果服务器未返回正确的响应首部，则请求方不会收到任何数据。因此，那些不允许跨站点请求的网站无需为这一新的 HTTP 访问控制特性担心。
注意: WebKit Nightly 和 Safari Technology Preview 为Accept, Accept-Language, 和 Content-Language 首部字段的值添加了额外的限制。如果这些首部字段的值是“非标准”的，WebKit/Safari 就不会将这些请求视为“简单请求”。WebKit/Safari 并没有在文档中列出哪些值是“非标准”的，不过我们可以在这里找到相关讨论：Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language, Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS, and Switch to a blacklist model for restricted Accept headers in simple CORS requests。其它浏览器并不支持这些额外的限制，因为它们不属于规范的一部分。

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

<span style="color:#212121"><code><span style="color:#00458b">var</span> invocation <span style="color:#212121">=</span> <span style="color:#00458b">new</span> <span style="color:#dd4a68">XMLHttpRequest</span><span style="color:#999999">(</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
<span style="color:#00458b">var</span> url <span style="color:#212121">=</span> <span style="color:#276738">'http://bar.other/resources/public-data/'</span><span style="color:#999999">;</span>

<span style="color:#00458b">function</span> <span style="color:#b54248">callOtherDomain</span><span style="color:#999999">(</span><span style="color:#999999">)</span> <span style="color:#999999">{</span>
  <span style="color:#00458b">if</span><span style="color:#999999">(</span>invocation<span style="color:#999999">)</span> <span style="color:#999999">{</span>
    invocation<span style="color:#999999">.</span><span style="color:#b54248">open</span><span style="color:#999999">(</span><span style="color:#276738">'GET'</span><span style="color:#999999">,</span> url<span style="color:#999999">,</span> <span style="color:#990055">true</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
    invocation<span style="color:#999999">.</span>onreadystatechange <span style="color:#212121">=</span> handler<span style="color:#999999">;</span>
    invocation<span style="color:#999999">.</span><span style="color:#b54248">send</span><span style="color:#999999">(</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
  <span style="color:#999999">}</span>
<span style="color:#999999">}</span>
</code></span>

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

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

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


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

<span style="color:#999999">[</span>XML Data<span style="color:#999999">]</span>
</code></span>

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

第 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 首部字段所指明的域名。

预检请求

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

如下是一个需要执行预检请求的 HTTP 请求：

<span style="color:#212121"><code><span style="color:#00458b">var</span> invocation <span style="color:#212121">=</span> <span style="color:#00458b">new</span> <span style="color:#dd4a68">XMLHttpRequest</span><span style="color:#999999">(</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
<span style="color:#00458b">var</span> url <span style="color:#212121">=</span> <span style="color:#276738">'http://bar.other/resources/post-here/'</span><span style="color:#999999">;</span>
<span style="color:#00458b">var</span> body <span style="color:#212121">=</span> <span style="color:#276738">'<?xml version="1.0"?><person><name>Arun</name></person>'</span><span style="color:#999999">;</span>

<span style="color:#00458b">function</span> <span style="color:#b54248">callOtherDomain</span><span style="color:#999999">(</span><span style="color:#999999">)</span><span style="color:#999999">{</span>
  <span style="color:#00458b">if</span><span style="color:#999999">(</span>invocation<span style="color:#999999">)</span>
    <span style="color:#999999">{</span>
      invocation<span style="color:#999999">.</span><span style="color:#b54248">open</span><span style="color:#999999">(</span><span style="color:#276738">'POST'</span><span style="color:#999999">,</span> url<span style="color:#999999">,</span> <span style="color:#990055">true</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
      invocation<span style="color:#999999">.</span><span style="color:#b54248">setRequestHeader</span><span style="color:#999999">(</span><span style="color:#276738">'X-PINGOTHER'</span><span style="color:#999999">,</span> <span style="color:#276738">'pingpong'</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
      invocation<span style="color:#999999">.</span><span style="color:#b54248">setRequestHeader</span><span style="color:#999999">(</span><span style="color:#276738">'Content-Type'</span><span style="color:#999999">,</span> <span style="color:#276738">'application/xml'</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
      invocation<span style="color:#999999">.</span>onreadystatechange <span style="color:#212121">=</span> handler<span style="color:#999999">;</span>
      invocation<span style="color:#999999">.</span><span style="color:#b54248">send</span><span style="color:#999999">(</span>body<span style="color:#999999">)</span><span style="color:#999999">;</span>
    <span style="color:#999999">}</span>
<span style="color:#999999">}</span>

<span style="color:#212121">...</span><span style="color:#212121">...</span>
</code></span>

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

<span style="color:#212121">OPTIONS /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
Origin: http://foo.example
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type


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://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400
Vary: Accept-Encoding, Origin
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain</span>

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

<span style="color:#212121"><code>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]</code></span>

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

<span style="color:#212121"><code>Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type</code></span>

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

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

<span style="color:#212121"><code>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</code></span>

首部字段 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 小时。在有效时间内，浏览器无须为同一请求再次发起预检请求。请注意，浏览器自身维护了一个最大有效时间，如果该首部字段的值超过了最大有效时间，将不会生效。

预检请求与重定向

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

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 最初要求该行为，不过在后续的修订中废弃了这一要求。

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

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

如果上面两种方式难以做到，我们仍有其他办法：

不过，如果请求是由于存在 Authorization 字段而引发了预检请求，则这一方法将无法使用。这种情况只能由服务端进行更改。

附带身份凭证的请求

XMLHttpRequest 或 Fetch 与 CORS 的一个有趣的特性是，可以基于  HTTP cookies 和 HTTP 认证信息发送身份凭证。一般而言，对于跨源 XMLHttpRequest 或 Fetch 请求，浏览器不会发送身份凭证信息。如果要发送凭证信息，需要设置 XMLHttpRequest 的某个特殊标志位。

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

<span style="color:#212121"><code>var invocation = new XMLHttpRequest();
var url = 'http://bar.other/resources/credentialed-content/';

function callOtherDomain(){
  if(invocation) {
    invocation.open('GET', url, true);
    invocation.withCredentials = true;
    invocation.onreadystatechange = handler;
    invocation.send();
  }
}</code></span>

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

客户端与服务器端交互示例如下：

<span style="color:#212121"><code>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
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
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]</code></span>

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

附带身份凭证的请求与通配符

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

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

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

第三方 cookies

注意在 CORS 响应中设置的 cookies 适用一般性第三方 cookie 策略。在上面的例子中，页面是在 `foo.example` 加载，但是第 20 行的 cookie 是被 `bar.other` 发送的，如果用户设置其浏览器拒绝所有第三方 cookies，那么将不会被保存。

HTTP 响应首部字段

本节列出了规范所定义的响应首部字段。上一小节中，我们已经看到了这些首部字段在实际场景中是如何工作的。

Access-Control-Allow-Origin

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

<span style="color:#212121">Access-Control-Allow-Origin: <origin> | *
</span>

其中，origin 参数的值指定了允许访问该资源的外域 URI。对于不需要携带身份凭证的请求，服务器可以指定该字段的值为通配符，表示允许来自所有域的请求。

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

<span style="color:#212121">Access-Control-Allow-Origin: http://mozilla.com</span>

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

Access-Control-Expose-Headers

译者注：在跨源访问时，XMLHttpRequest对象的getResponseHeader()方法只能拿到一些最基本的响应头，Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma，如果要访问其他头，则需要服务器设置本响应头。

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

<span style="color:#212121">Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header
</span>

这样浏览器就能够通过getResponseHeader访问X-My-Custom-Header和 X-Another-Custom-Header 响应头了。

Access-Control-Max-Age

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

<span style="color:#212121">Access-Control-Max-Age: <delta-seconds>
</span>

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

Access-Control-Allow-Credentials

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

<span style="color:#212121">Access-Control-Allow-Credentials: true
</span>

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

Access-Control-Allow-Methods

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

<span style="color:#212121">Access-Control-Allow-Methods: <method>[, <method>]*
</span>

相关示例见这里。

Access-Control-Allow-Headers

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

<span style="color:#212121">Access-Control-Allow-Headers: <field-name>[, <field-name>]*
</span>

HTTP 请求首部字段

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

Origin

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

<span style="color:#212121">Origin: <origin>
</span>

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

Note: 有时候将该字段的值设置为空字符串是有用的，例如，当源站是一个 data URL 时。

注意，在所有访问控制请求（Access control request）中，Origin 首部字段总是被发送。

Access-Control-Request-Method

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

<span style="color:#212121">Access-Control-Request-Method: <method>
</span>

相关示例见这里。

Access-Control-Request-Headers

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

<span style="color:#212121">Access-Control-Request-Headers: <field-name>[, <field-name>]*</span>

转自https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS# 

IT 哈
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
跨域资源共享CORS学习笔记
绯浅yousa的笔记
12-19 8174
跨域资源共享CORS学习笔记1、同源政策含义1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。最初，它的含义是指，A网页设置的 Cookie，B网页不能打开，除非这两个网页”同源”。所谓”同源”指的是”三个相同”。协议相同 域名相同 端口相同举例来说，http://www.example.com/dir/page.html这个网址，协议是http://，域名是
CORS解决方案汇总
最新发布
所罗门，老娘回来了
03-26 1769
Cors全称"跨域资源共享"（Cross-origin resource sharing），Cors的出现是用来弥补SOP（同源策略）的不足。在当时SOP有些限制了网页的业务需求，不能够使不同域的网页互相访问，因此提出了Cors：用于绕过SOP（同源策略）来实现跨域资源访问的一种技术。Cors漏洞就是攻击者利用Cors技术来获取用户的敏感数据，从而导致用户敏感信息泄露。
跨域资源共享（CORS）
2197
08-16 309
1&gt;原理 它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制，需要服务器和浏览器共同支持，但是目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。所以实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。 2&gt;为什么要验证 基于CSRF（跨站请求伪造）的风险，各主流浏览器会对动态的跨域请求进行特殊的验...
什么是 CORS（跨源资源共享）？
qq_37116560的博客
05-11 1687
现代网页比以往任何时候都使用更多的外部脚本和资产。默认情况下，JavaScript 遵循同源策略，只能调用与运行脚本在同一域中的 URL。那么，我们怎样才能让我们的 JavaScript 支持的页面使用外部脚本呢？ CORS 就是答案。 跨源资源共享 (CORS) 是一种允许网页访问在不同受限域上运行的API或资产的方式的机制。 什么是 CORS？ 跨源资源共享 (CORS) 是一种浏览器...
Python-TheftFuzzer是一种工具可以模拟跨源资源共享CORS实现中常见的错误配置
08-10
TheftFuzzer是一种工具，可以模拟跨源资源共享CORS实现中常见的错误配置
跨域资源共享 CORS 详解
09-02
所有浏览器都支持该功能IE浏览器不能低于IE10...对于开发者来说CORS通信与同源的AJAX通信没有差别代码完全一样浏览器一旦发现AJAX请求跨源就会自动添加一些附加的头信息有时还会多出一次附加的请求，但用户不会有感觉。
flask-cors:跨源资源共享（CORS）对Flask的支持
04-28
烧瓶CORS Flask扩展，用于处理跨源资源共享（CORS），使得跨源AJAX成为可能。 这个软件包有一个简单的理念：当您想要启用CORS时，您希望针对域中的所有用例启用它。 这意味着不会混用不同的允许的标头，方法等。 ...
play-cors:对 Play 的跨源资源共享 (CORS) 支持
06-26
对 Play 的跨源资源共享 (CORS) 支持 实现跨源资源共享 (CORS) 的可配置过滤器和操作构建器。 请参阅完整的。 请参阅。 设置 play-cors 是为 Play 2.3.x 以及 Scala 2.10.x 和 2.11.x 构建的。 Bintray 提供了二...
跨域请求和跨域资源共享（CORS）的基本介绍
weixin_41702436的博客
03-27 387
上图展示了跨域请求和跨域资源共享（CORS）的概念： 1.浏览端加载的内容为domain-a.com的web文档，该web文档加载domain-a.com中的其他资源时，发起的请求（同域请求）都是被允许的，如果要加载domain-b.com中的资源时，此请求将会被阻止，被阻止的请求为跨域请求。（补充：该阻止过程可能是浏览端限制了跨域请求的发起，也可能是跨域请求正常发起了，但是浏览端拦截了返回结果...
cors跨域资源共享的原理和简单应用
龙游浅滩的博客
09-22 483
一.CORS：CORS（Cross-Origin Resourse Sharing）,跨源资源共享，是一份浏览器技术的规范，提供了Web服务从不同网域传来沙盒脚本的方法，以避开浏览器的同源策略，是JSONP模式的现代版。二. CORS的原理： CORS定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务
CORS跨域资源共享
weixin_46511008的博客
05-09 1113
CORS跨域资源共享 1、 接口的跨域问题 （1）编写的 GET 和 POST 接口，存在一个很严重的问题：不支持跨域请求。 解决接口跨域问题的方案主要有两种： ① CORS（主流的解决方案， 推荐使用 ） ② JSONP（有缺陷的解决方案：只支持 GET 请求） （2）这里主要分析使用 CORS 解决跨域的问题。 2、使用 cors 中间件 解决跨域问题 cors 是 Express 的一个第三方中间件。通过安装和配置 cors 中间件，可以很方便地解决跨域问题。
【CORS】跨域资源共享解决方案＜Access-Control-Allow-Origin＞
Coding and studying
06-13 2055
要了解跨域，首先要知道一个东西：。同源策略中规定，访问服务必须在 三个层面都相同，否则就是违背同源策略，也就是。比如， 访问 是跨域，违背了同源策略中的【端口号保持一致】。 访问 是跨域，违背了同源策略中的【协议保持一致】。 访问 是跨域，违背了同源策略中的【域名保持一致】。下表列出了与 : 的源进行对比的示例：而想要跨源访问资源（服务器），就需要进行跨域——CORS。 跨源 HTTP 请求的一个例子：运行在 的 代码使用 XMLHttpRequest 来发起一个到 的请求。出于安全性，浏览器限制
【HTTP】跨域资源共享 Cross-Origin Resource Sharing
z767327552的专栏
10-29 288
跨域资源共享-Cross-Origin Resource Sharing 什么是跨域 例如有个前端js资源从a站点加载，而利用XHR从B站点请求一个json文件 CORS背后的基本思想，就是使用自定义的 HTTP头部 让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。 比如一个简单的使用 GET 或 POST 发送的请求，它没有自定义的头部，而主体内容是 text/pl...
CORS跨域资源共享及解决方案
憧憬个人博客
02-08 1566
为什么会出现跨域的问题？Javascript的访问是根据同源策略来的，同源策略即（同端口，同协议，同域名）。现在主流的开发方式都是前后端分离，所以很容易就出现跨域的问题。cors即跨域资源共享，解决了前后端分离的资源共享问题。目前主流的浏览器都支持corsCORS出现场景 简答请求和非简单请求有些情况并不会触发cors的预检请求（即Options请求）我们将这种称...
CORS(cross-origin-resource-sharing)跨源资源共享
weixin_30617561的博客
11-19 139
其实就是跨域请求。我们知道XHR只能访问同一个域中的资源，这是浏览器的安全策略所限制，但是开发中合理的跨域请求是必须的。CORS是W3的一个工作草案，基本思想就是：使用自定义的HTTP头部让浏览器与服务器沟通，决定响应成功或失败。 CORS需要浏览器和服务器同时支持，所有浏览器都支持该功能，IE浏览器在IE10以上支持。 CORS跟同源AJAX请求差别不大，主要是浏览器发现Ajax跨域请求时候...
跨源资源共享
ace15824843202的博客
08-10 179
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CORS</title> </head> <body> <script src="../js/jquery.js"></scri...
CORS(跨站资源共享)原始验证失败
12-22
CORS（跨站资源共享）是一种用于在浏览器中进行跨域请求的机制。当浏览器发起跨域请求时，会先发送一个预检请求（OPTIONS请求）来验证服务器是否允许该跨域请求。如果预检请求的验证失败，就会出现CORS原始验证失败的情况。 CORS原始验证失败可能有以下几种原因： 1. 服务器未正确设置Access-Control-Allow-Origin响应头：对于附带身份凭证的请求，服务器不得设置Access-Control-Allow-Origin的值为“*”，而应该设置为请求源的具体值或允许的域名列表。 2. 服务器未正确设置Access-Control-Allow-Methods响应头：该响应头用于指定服务器支持的请求方法。如果服务器不支持预检请求中指定的请求方法，就会导致CORS原始验证失败。 3. 服务器未正确设置Access-Control-Allow-Headers响应头：该响应头用于指定服务器支持的请求头。如果服务器不支持预检请求中指定的请求头，就会导致CORS原始验证失败。 4. 服务器未正确设置Access-Control-Allow-Credentials响应头：如果请求附带了身份凭证（如cookie、HTTP认证等），服务器需要设置该响应头为true，表示允许跨域请求携带身份凭证。 5. 请求中的Content-Type不符合预检请求中的Content-Type：如果预检请求中指定了Content-Type，那么实际请求的Content-Type必须与之一致，否则会导致CORS原始验证失败。 如果出现CORS原始验证失败，你可以通过以下步骤来解决问题： 1. 检查服务器的响应头是否正确设置了Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers和Access-Control-Allow-Credentials。 2. 检查请求中的Content-Type是否与预检请求中的Content-Type一致。 3. 检查是否有其他安全机制（如防火墙、代理等）阻止了跨域请求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值