javascript - 进行预检请求时是否需要 Access-Control-Allow-Origin CORS header ？

Question

我们在我们的网站上看到了众所周知的 CORS 错误:

XMLHttpRequest cannot load https://my-site.com/api. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://my-other-site.com' is therefore not allowed access.

问题是，Access-Control-Allow-Origin 在预检请求中设置正确...

OPTIONS https://my-site.com/api HTTP/1.1
Host: my-site.com
Access-Control-Request-Method: POST
Origin: https://my-other-site.com
Access-Control-Request-Headers: my-custom-header, accept, content-type
Accept: */*
Referer: https://my-other-site.com/
...other stuff...


HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://my-other-site.com
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: my-custom-header, accept, content-type
Access-Control-Expose-Headers: my-custom-header
...other stuff...

...但是，它未在后续请求中设置。

POST https://my-site.com/api HTTP/1.1
Host: my-site.com
Accept: */*
My-Custom-Header: abcd123
Origin: https://my-other-site.com
Referer: https://my-other-site.com/
...other stuff...


HTTP/1.1 200 OK
My-Custom-Header: abcd123
...other stuff...

我不明白这个问题。根据我在网上阅读的一切，如果我们使用预检请求，我们不需要为实际请求添加 CORS header 。然而，事实显然并非如此。

所有示例 here和 here在实际响应中包含 Access-Control-Allow-Origin header ，但不包含任何其他“必需” CORS header 。当我们将那个 header 添加到我们的实际响应中时，错误就消失了。

---

所以我的问题是，两个请求中实际上都需要 Access-Control-Allow-Origin header 吗？ 在哪里声明？为什么是这样？

Answer 1

是的，看起来两个响应都应该包含必要的 CORS header 。

在 Simple Cross-Origin Request 中和 Cross-Origin Request with Preflight ，“实际请求”遵循相同的行为，无论预检如何检查 CORS header (分别为第 1 步和第 3 步)。

1. [...] Apply the make a request steps and observe the request rules below while making the request.

   • ... (snipped: 3xx codes, aborts, and network errors)

   • Otherwise

     Perform a resource sharing check. [...]

The resource sharing check algorithm for a given resource is as follows:

1. If the response includes zero or more than one Access-Control-Allow-Origin header values, return fail and terminate this algorithm.

2. [...]

预检请求只会阻止“实际请求”的开始。