amazon-s3 - AWS S3 提供的 CORS header 不一致

Question

我正在使用 AWS S3，并且已将我的存储桶配置为使用 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 header 。有时这有效，有时则无效。我无法准确找出导致问题的原因。我很好地检索到了一张图像；然后我将新图像上传到存储桶，该图像下载后出现错误:

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> ，并在每次更改时清除我的缓存，但没有效果。我很困惑。为什么 header 没有通过？

Answer 1

它并不总是返回 COR header ，似乎您需要提供原始 header ，但您并不总是这样做。

为了使其一致并始终返回 COR header ，您需要添加一个 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