AJAX from S3 CORS fails on preflight OPTIONS with 403

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

解决办法：

将

<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

改为：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin> //The '*' wildcard character refers to all origins.
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader> //The rule also allows all headers in a pre-flight OPTIONS request through the Access-Control-Request-Headers header.
</CORSRule>
</CORSConfiguration>

http://docs.aws.amazon.com/zh_cn/AmazonS3/latest/API/RESTBucketPUTcors.html

http://stackoverflow.com/questions/26691286/amazon-s3-bucket-returning-403-forbidden

cloudFront上配置cors:

http://stackoverflow.com/questions/12229844/amazon-s3-cors-cross-origin-resource-sharing-and-firefox-cross-domain-font-loa

Chrome console中的报错信息：

jquery.min.js:4 OPTIONS https://hello.s3-ap-south-1.amazonaws.com/20170303/jakartaSnsTest…Signature=b03ff312f553715bee852c1ce9122e13cb52bd8c88e53826dfcfb521efb2f9e4 403 (Forbidden)
send @ jquery.min.js:4
ajax @ jquery.min.js:4
putObject @ upload.js:7
upload @ upload.js:39
uploadFile @ upload.js:46
submit @ (index):40
onclick @ (index):26
(index):1 XMLHttpRequest cannot load https://hello.s3-ap-south-1.amazonaws.com/20170303/jakartaSnsTest…Signature=b03ff312f553715bee852c1ce9122e13cb52bd8c88e53826dfcfb521efb2f9e4.

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

The response had HTTP status code 403.
upload.js:42 Put object failed, status:0, error:
2jquery.min.js:4 OPTIONS https://hello.s3-ap-south-1.amazonaws.com/20170303/jakartaSnsTest…Signature=b03ff312f553715bee852c1ce9122e13cb52bd8c88e53826dfcfb521efb2f9e4 403 (Forbidden)
send @ jquery.min.js:4
ajax @ jquery.min.js:4
putObject @ upload.js:7
upload @ upload.js:39
uploadFile @ upload.js:46
submit @ (index):40
onclick @ (index):26
(index):1 XMLHttpRequest cannot load https://hello.s3-ap-south-1.amazonaws.com/20170303/jakartaSnsTest…Signature=b03ff312f553715bee852c1ce9122e13cb52bd8c88e53826dfcfb521efb2f9e4.

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Origin 'http://localhost' is therefore not allowed access. The response had HTTP status code 403.
Put object failed, status:0, error:

Response中的报错信息：

<Error>
<Code>AccessForbidden</Code>
<Message>CORSResponse: This CORS request is not allowed. This is usually because the evalution of Origin, request method
/ Access-Control-Request-Method or Access-Control-Request-Headers are not whitelisted by the resource's CORS spec.
</Message>
<Method>PUT</Method>
<ResourceType>OBJECT</ResourceType>
<RequestId>A52988E0AA20EEC7</RequestId>
<HostId>9f9kf10MxX5Aw3o7vZD0QNN4kkkB6Bwmo9nWK7cTf8eJlnsve3E988MXFJ8rPejgiaqSE00QOms=</HostId>
</Error>

一个源的定义

如果协议，端口（如果指定了一个）和主机对于两个页面是相同的，则两个页面具有相同的源。

下表给出了相对http://store.company.com/dir/page.html同源检测的示例:

URL	结果	原因
`http://store.company.com/dir2/other.html`	成功	`dir2/other.html`
`http://store.company.com/dir/inner/another.html`	成功	`dir/inner/another.html`
`https://store.company.com/secure.html`	失败	不同的协议 ( https )
`http://store.company.com:81/dir/etc.html`	失败	不同的端口 ( 81 )
`http://news.company.com/dir/other.html`	失败	不同的主机 ( news )

https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy

跨源资源共享：使用案例场景

以下是有关使用 CORS 的示例场景：

场景 1：假设您在名为 website 的 Amazon S3 存储桶中托管网站（如在 Amazon S3 上托管静态网站中所述）。您的用户加载了网站终端节点 http://website.s3-website-us-east-1.amazonaws.com。现在，您想要使用存储的网页上（存储在此存储桶中）的 JavaScript，以使用该存储桶的 Amazon S3 API 终端节点 website.s3.amazonaws.com 向同一存储桶发送经身份验证的 GET 和 PUT 请求。浏览器通常会阻止 JavaScript 允许这些请求，但借助 CORS，您可以配置您的存储桶以显式支持来自 website.s3-website-us-east-1.amazonaws.com 的跨源请求。
场景 2：假设您想要托管来自您的 S3 存储桶的 Web 字体。浏览器会再次要求对正在加载的 Web 字体进行 CORS 检查（也称为预检），因此您应该配置托管此 Web 字体的存储桶以允许任意源发送这些请求。

如何在我的存储桶上配置 CORS？

要将您的存储桶配置为允许跨源请求，您可以创建一个 CORS 配置，即一个 XML 文档，其中包含一些规则，它们能够识别您允许访问存储桶的源、每个源支持的操作（HTTP 方法），以及其他特定操作的信息。

您可以向配置添加最多 100 条规则。通过编程方式或者使用控制台将 XML 文档作为 cors 子资源添加到存储桶 Amazon S3。有关更多信息，请参阅允许跨源资源共享 (CORS)。

以下示例 cors 配置具有三个规则，这些规则被指定为 CORSRule 元素：

第一个规则允许来自 https://www.example1.com 源的跨源 PUT、POST 和 DELETE 请求。该规则还通过 Access-Control-Request-Headers 标头允许预检 OPTIONS 请求中的所有标头。
作为对任何预检 OPTIONS 请求的响应，Amazon S3 将返回请求的任意标头。
第二个规则允许与第一个规则具有相同的跨源请求，但第二个规则应用于另一个源 https://www.example2.com。
第三个规则允许来自所有源的跨源 GET 请求。“*”通配符字符是指所有的源。

<CORSConfiguration> <CORSRule> <AllowedOrigin>http://www.example1.com</AllowedOrigin> <AllowedMethod>PUT</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <AllowedMethod>DELETE</AllowedMethod> <AllowedHeader>*</AllowedHeader> </CORSRule> <CORSRule> <AllowedOrigin>http://www.example2.com</AllowedOrigin> <AllowedMethod>PUT</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <AllowedMethod>DELETE</AllowedMethod> <AllowedHeader>*</AllowedHeader> </CORSRule> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> </CORSRule> </CORSConfiguration>

CORS 配置还允许可选的配置参数，如下面的 CORS 配置所示。在本示例中，下面的 CORS 配置允许来自 http://www.example.com 源的跨源 PUT、POST 和 DELETE 请求。

<CORSConfiguration> <CORSRule> <AllowedOrigin>http://www.example.com</AllowedOrigin> <AllowedMethod>PUT</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <AllowedMethod>DELETE</AllowedMethod> <AllowedHeader>*</AllowedHeader> <MaxAgeSeconds>3000</MaxAgeSeconds> <ExposeHeader>x-amz-server-side-encryption</ExposeHeader> <ExposeHeader>x-amz-request-id</ExposeHeader> <ExposeHeader>x-amz-id-2</ExposeHeader> </CORSRule> </CORSConfiguration>

上述配置中的 CORSRule 元素包括以下可选元素：

MaxAgeSeconds - 指定在 Amazon S3 针对特定资源的预检 OPTIONS 请求做出响应后，浏览器缓存该响应的时间（以秒为单位）（在本示例中，为 3000 秒）。通过缓存响应，在需要重复原始请求时，浏览器无需向 Amazon S3 发送预检请求。
ExposeHeader – 识别可允许客户从应用程序（例如，从 JavaScript XMLHttpRequest 对象）进行访问的响应标头（在本示例中，为 x-amz-server-side-encryption、x-amz-request-id 和 x-amz-id-2）。

AllowedMethod 元素

在 CORS 配置中，您可以为 AllowedMethod 元素指定以下值。

GET
PUT
POST
DELETE
HEAD

AllowedOrigin 元素

在 AllowedOrigin 元素中，指定要允许从其发送跨源请求的源，例如 http://www.example.com。源字符串可包含至少一个 * 通配符字符，例如 http://*.example.com。您可以选择将 * 指定为源，以允许所有源发送跨源请求。您还可以指定 https 只允许安全的源。

AllowedHeader 元素

AllowedHeader 元素通过 Access-Control-Request-Headers 标头指定预检请求中允许哪些标头。Access-Control-Request-Headers 标头中的每个标头名称必须匹配规则中的相应条目。Amazon S3 将仅发送请求的响应中允许的标头。有关可以在发送至 Amazon S3 的请求中使用的标头示例列表，请参阅 Amazon Simple Storage Service API Reference 指南中的常用请求标头。

规则中的每个 AllowedHeader 字符串可以包含至少一个 * 通配符字符。例如，<AllowedHeader>x-amz-*</AllowedHeader> 将允许所有特定于 Amazon 的标头。

ExposeHeader 元素

每个 ExposeHeader 元素标识您希望客户能够从其应用程序（例如，从 JavaScript XMLHttpRequest 对象）进行访问的响应标头。有关常用 Amazon S3 响应标头的列表，请参阅 Amazon Simple Storage Service API Reference 指南中的常用响应标头。

MaxAgeSeconds 元素

MaxAgeSeconds 元素指定在预检请求被资源、HTTP 方法和源识别之后，浏览器将为预检请求缓存响应的时间（以秒为单位）。

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

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

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

Note

使存储桶允许 CORS 后，ACL 和策略仍适用。

http://docs.aws.amazon.com/zh_cn/AmazonS3/latest/dev/cors.html