CORS Origin 设置不正确？答案

【问题标题】：CORS Origin set incorrectly?CORS Origin 设置不正确？
【发布时间】：2018-02-22 01:08:20
【问题描述】：

我有一个 JavaScript 应用程序，假设它部署在 portal.example.com 上。
这包括一个 <script> 标记，用于加载从 assets.example.com 提供的源。
该 JavaScript 文件向admin.example.com 上的 API 发出 HTTP 请求

由于 CORS 预检失败，此 API 请求出错。

Failed to load http://admin.example.com/v0/user/navigation: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://portal.example.com' is therefore not allowed access.

实际的OPTIONS请求如下

OPTIONS /v0/user/navigation HTTP/1.1
Host: admin.example.com
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://portal.example.com
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36
Access-Control-Request-Headers: authorization,x-correlation-id,x-user-domain
Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9,en-GB;q=0.8

实际的OPTIONS响应如下

HTTP/1.1 200
Allow: GET
Access-Control-Allow-Headers: authorization,x-correlation-id,x-user-domain
Access-Control-Allow-Methods: GET
Access-Control-Allow-Origin: http://portal.example.com
Vary: Origin
Content-Length: 0
Date: Tue, 20 Feb 2018 12:12:19 GMT
Set-Cookie: 97d2c19dadc3933a73dce9bec0748df1=5a15895c5e0f5b526c177132cb4aa666; path=/; HttpOnly
Cache-control: private
X-RBT-SCAR: 10.127.48.7:777511903:1000

我认为问题是因为请求实际上来自assets.example.com 提供的脚本，正在发出请求。所以我应该在OPTIONS 响应中返回Access-Control-Allow-Origin: http://assets.example.com。不过我还是听从了W3C的建议。

Access-Control-Allow-Origin 标头指示是否可以通过在响应中返回 Origin 请求标头的值、“*”或“null”来共享资源。

我误解了 CORS，还是浏览器发送了主执行 URL 的 Origin 而不是发出请求的脚本的 URL？

更新

获取响应

HTTP/1.1 200
X-Correlation-Id: 8978b245-081a-4c4a-b4c9-73f2920ab55c
Content-Type: application/vnd.example+json
Transfer-Encoding: chunked
Date: Tue, 20 Feb 2018 13:22:39 GMT
Set-Cookie: 97d2c19dadc3933a73dce9bec0748df1=dc4e3543c3071d752959e7176c5e4d29; path=/; HttpOnly
Cache-control: private
X-RBT-SCAR: 10.127.48.7:778160108:2000

【问题讨论】：

能否提供GET响应的标头？
您的设置看起来正确。我将要建议的将是一个延伸。在设置 CORS 的服务器端，首先确保源的拼写正确。如果是，则取 http://portal.example.com 并删除整个字符串（以及它之前和之后的第一个字符），然后手动重新输入。我见过有人复制和粘贴一些文本的例子，其中包含一些未被检测到并造成严重破坏的特殊 unicode 字符。
@alex-rokabilis 我已经更新了问题

标签： javascript cors browser-security

【解决方案1】：

No 'Access-Control-Allow-Origin' header is present on the requested resource. 这意味着缺少“Access-Control-Allow-Origin”标头，而不是您的域不被允许。

如果你没有权限，你会看到类似

The 'Access-Control-Allow-Origin' header has a value 'http://www.example.com' that is not equal to the supplied origin.

因此，要解决您的问题，您需要配置 GET 响应以提供必要的 CORS 标头以及 OPTIONS 响应。

在您编辑的问题中，GET 响应标头没有为 Access-Control-* 提供任何内容，这就是您收到错误的原因！

【讨论】：

【解决方案2】：

您的 CORS 预检没有失败 - 您收到 200 响应和所有必需的 CORS 响应标头...

但是，您没有在 GET 响应中返回任何 CORS 响应标头 - 那是失败的原因。至少，您需要返回一个 Access-Control-Allow-Origin 响应标头，该标头与 OPTIONS 响应中返回的标头匹配。

因此，只需将其包含在您的 GET 响应中就可以了：

Access-Control-Allow-Origin: http://portal.example.com

最后，Origin 请求标头由浏览器添加，相信我 - 这是正确的。但是发送 what 值并不重要，因为只需要 Access-Control-Allow-Origin 响应标头匹配 Origin 请求标头（通过具有值'*' 或与 Origin 值完全匹配）。

【讨论】：