AWS S3 存储桶上传时出现 CORS 错误

Question

我的 AWS S3 存储桶 CORS 配置设置如下

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedOrigin>http://localhost:5000</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

并在浏览器中发出签名的上传请求：

function upload_file(file, signed_request, url){
    var xhr = new XMLHttpRequest();
    xhr.open("PUT", signed_request);
    xhr.setRequestHeader('x-amz-acl', 'public-read');
    xhr.onload = function() {
        if (xhr.status === 200) {
            $('#photo').css('background-image', "url('"+url+"')");
        }
    };
    xhr.onerror = function(err) {
        alert("Could not upload file.", err);
    };
    xhr.send(file);
}

但是 chrome 和 firefox 都会抛出 Access-Control-Allow-Origin header not set 错误。特别是在 Firefox 中：“（原因：CORS 标头‘Access-Control-Allow-Origin’丢失）。”

Answer 1

Access-Control-Allow-Headers

标头不允许使用通配符。它必须包含实际的标头名称。

查看网络选项卡中的预检请求。

Access-Control-Request-Headers

标头中的值必须包含为

AllowedHeader

。

Answer 2

现在遇到此问题时，这意味着您需要编辑 S3 Bucket 的跨域资源共享 (CORS) 配置。

在 AWS 控制台中：

1. 导航至S3
2. 在搜索中找到您的存储桶名称
3. 单击

   Permissions

   选项卡
4. 找到

   Cross-origin resource sharing (CORS)

   部分并单击“编辑”按钮
5. 编辑 json，将域的来源添加到

   AllowedOrigins

   数组并保存更改。

截图：