6

使用 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

4

3 回答 3

3

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

您如何设置 CORS，是否使用 xml 文件？

于 2017-12-02T16:56:08.633 回答
2

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

于 2017-12-02T17:06:01.613 回答
1

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

<AllowedHeader>Authorization</AllowedHeader>

通用请求标头

基本上，您编写 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 元素匹配。

跨域资源共享 (CORS)

于 2017-12-02T19:03:40.173 回答