aws-sdk 抱怨缺少实际存在的 cors 标头答案

【问题标题】：aws-sdk complains about a cors header missing that actually existsaws-sdk 抱怨缺少实际存在的 cors 标头
【发布时间】：2017-12-03 03:16:45
【问题描述】：

使用 webpack 运行开发服务器，我正在尝试列出 S3 存储桶中的项目并使用浏览器中的 javascript aws-sdk 控制台输出结果。

这样做时我收到此错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://bucketname.s3.amazonaws.com/?list-type=2&max-keys=2. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

但是我在 webpack 开发服务器配置中设置了该标头，证明如下：

curl -I http://localhost:8080

HTTP/1.1 200 OK
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, PATCH, OPTIONS
Access-Control-Allow-Headers: X-Requested-With, content-type, Authorization
X-Content-Type-Options: nosniff
Content-Type: text/html; charset=utf-8
Content-Length: 7170
Vary: Accept-Encoding
Date: Sat, 02 Dec 2017 16:15:04 GMT
Connection: keep-alive

所以我对所有东西都尝试了 *：

HTTP/1.1 404 Not Found
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: *
Access-Control-Allow-Headers: *

如果标头在那里并且错误说它丢失了，那可能是授权之类的其他东西吗？

如果确实是标头设置，如果标头确实存在，下一步将是什么？

更新****

1：在 S3 上添加 CORS 设置，但我相信它抱怨的标头不会出现在 S3 上：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

此外，存储桶未启用公共或静态托管。

2：这行得通：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>
   <AllowedHeader>*</AllowedHeader>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

来自标记答案给出的 URL

【问题讨论】：

抱怨 S3 存储桶上的 CORS 配置阻塞了请求。它与您的开发服务器上的 CORS 配置无关。您需要按照以下答案中的链接在 S3 存储桶上配置 CORS。
@MarkB 我有兴趣学习如何正确阅读该错误消息。我对它的阅读完全不同。我认为它会在未来对我有所帮助，除非您同意它有明确的需求。
这与错误消息中的措辞关系不大，更多的是与理解 CORS 的工作原理有关。当您在网页中包含托管在另一个域上的某些内容时，浏览器会访问该域以查看它们是否可以将其内容包含在您的网页中（通过检查 CORS 标头）。 CORS 不是告诉浏览器可以在您的页面中显示哪些其他域，CORS 是关于告诉浏览器其他域是否可以包含您的内容。因此，您的服务器的 CORS 配置与您遇到的问题无关，它必须在 S3 上进行配置。

标签： amazon-web-services amazon-s3 aws-sdk-js

【解决方案1】：

希望阅读本文能有所帮助：http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

你如何设置你的 CORS，是使用 xml 文件吗？

【讨论】：

在 S3 上设置的 CORS 是默认设置，但错误是抱怨我的服务器没有发送正确的标头 Access-Control-Allow-Origin ，还是我读错了？

【解决方案2】：

您在 S3 存储桶配置上设置了 CORS。登录 AWS 管理控制台。转到 S3 存储桶；在右边你找到选项

【讨论】：

【解决方案3】：

您的第一个示例不起作用的原因是这个 CORS 通用请求标头：

<AllowedHeader>Authorization</AllowedHeader>

Common Request Headers

基本上，您编写 CORS 政策的方式是所有请求都需要存在 Authorization 标头。示例：

Authorization: AWS AWSAccessKeyId:Signature

解决办法是改成：

<AllowedHeader>*</AllowedHeader>

Amazon S3 如何评估存储桶上的 CORS 配置？

当 Amazon S3 收到来自浏览器的预检请求时，它评估存储桶的 CORS 配置并使用第一个 CORSRule 规则匹配传入的浏览器请求以启用跨域请求。对于要匹配的规则，以下条件必须满足：

请求的 Origin 标头必须与 AllowedOrigin 元素匹配。
在预检 OPTIONS 请求的情况下，请求方法（例如 GET 或 PUT）或 Access-Control-Request-Method 标头必须是 AllowedMethod 元素之一。
预检请求的 Access-Control-Request-Headers 标头中列出的每个标头都必须与 AllowedHeader 元素匹配。

Cross-Origin Resource Sharing (CORS)

【讨论】：