AWS：如何在 S3 CORS 配置中允许多个域？

我的许多依赖 S3 作为 Cloudfront 来源的网站都遇到了问题。但是，我在允许多个域（而不是全局域）方面遇到了问题*允许）。

我已按照文档进行操作here http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html（第一个配置）。并在这里和那里找到了一些其他随机的 SO 或论坛答案（第二个配置）

任何帮助表示赞赏。

我设置了如下所示的 CORS 规则：

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

AND

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

我在所有网站上不断收到字体来源错误except https://example.com:

字体来源'http://CloudFrontURL http://CLOUDFRONTURL' 已被跨源资源共享策略阻止加载：请求的资源上不存在“Access-Control-Allow-Origin”标头。起源 'http://example.dev http://example.dev' 因此不允许访问。

AND

字体来源'http://CloudFrontURL http://CLOUDFRONTURL' 已被跨源资源共享策略阻止加载：'Access-Control-Allow-Origin' 标头具有一个值 'https://example.com https://example.com' 不等于提供的原点。起源 'http://example.dev http://example.dev' 因此不允许访问。

背景：您的设置

• 假设您有域 A（例如dev.mydomain.com）和域 B（例如www.mydomain.com).
• 您的 CDN 位于cdn.mydomain.com它位于 CloudFront 上并指向私有 S3 存储桶。
• 文件（例如/fonts/myfont.woff，需要 CORS，per MDN https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#what_requests_use_cors）可以在您请求时访问www.mydomain.com via https://cdn.mydomain.com/fonts/myfont.woff. (See 我的回答在这里 https://stackoverflow.com/a/67610510到目前为止，关于如何设置它。）

要求（仅针对此问题）

• 您希望可以在以下位置访问该文件cdn.mydomain.com/fonts/myfont.woff仅当页面请求它时（即Origin标头）是either dev.mydomain.com or www.mydomain.com.
• You do NOT希望该文件在以下情况下可访问junk-cheap.com在此页面上加载您的字体文件（通过您的 CDN URL），以节省自己的带宽/托管成本；更不用说网络钓鱼和此类风险了！

问题

默认情况下，CloudFront 会缓存任何传入请求的响应。这就是 CDN 的全部意义。

但是，第一次（在失效之后）请求来自两个域中的任何一个对某个文件（例如/fonts/myfont.woff)，CloudFront 将此文件的响应缓存为{ "/fonts/myfont.woff": "<this response object with headers>"}。所以默认情况下，缓存键几乎只是路径。

现在，当域 B 请求同一文件时，“允许的域” of the 缓存响应该对象的对象是域 A，这种不匹配会导致 CORS 错误。

Solution

一种简单的解决方案是告诉 CloudFront 合并Origin到缓存键中。所以，在上面的例子中，缓存就像{ ["/fonts/myfont.woff", "Origin: www.mydomain.com"]: <response for www.mydomain.com only>, ... }.

您可以通过创建一个新的缓存策略这需要在Origin header:

然后将其设置在您的Behavior.

现在，使分发无效并重试！它应该有效。 :)

祝你好运！