AWS S3不一致地提供CORS头信息

Question

我正在使用AWS S3，已经配置了我的Bucket来使用CORS：

<?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>

我正在客户端的React应用程序中从Bucket请求SVG图像。我内联渲染它们，因此响应需要启用CORS标头。有时它可以正常工作，有时则不行。我无法确定问题的具体原因。我可以成功检索一个图像。然后我上传了一张新的图像到Bucket，但是下载后，该图像却给我报错：

XMLHttpRequest cannot load https://s3.amazonaws.com/.../example.svg. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

我尝试添加<AllowedHeader>*</AllowedHeader>和<ExposeHeader>ETAG</ExposeHeader>，并在每次更改后清除缓存，但效果不佳。我感到困惑。为什么头信息没有传递过来？

- andrewhl

---

尝试这个解决方法，只是为了验证我的理论是否正确：在上传时或稍后在控制台中设置对象元数据以返回Cache-Control: no-cache。清除浏览器缓存并进行测试。尽管听起来很奇怪，但我相信这是我之前遇到的S3设计问题。 - Michael - sqlbot

Answer 1

它并不总是返回CORs头，似乎需要提供一个来源头，但你并不总是这样做。

为了使其一致并始终返回CORs头，您需要添加一个lambda函数：

'use strict';

// If the response lacks a Vary: header, fix it in a CloudFront Origin Response trigger.

exports.handler = (event, context, callback) => {
    const response = event.Records[0].cf.response;
    const headers = response.headers;

    if (!headers['vary'])
    {
        headers['vary'] = [
            { key: 'Vary', value: 'Access-Control-Request-Headers' },
            { key: 'Vary', value: 'Access-Control-Request-Method' },
            { key: 'Vary', value: 'Origin' },
        ];
    }
    callback(null, response);
};

查看完整答案和更多细节，请点击此处：https://serverfault.com/a/856948/46223

- BrunoLM