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标头。有时它有效，有时它不起作用。我无法准确地找出造成问题的原因。我正在检索一张图片;然后我将一个新图像上传到存储桶，该图像一旦下载，就会给我一个错误：

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>，并在每次更改时清除缓存，均无效。我很困惑。为什么标题不会出现？

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

AWS S3不一致地提供CORS标头

1 个答案: