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

I have my AWS S3 bucket CORS configuration set up as follows

我的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>

And making a signed upload request in the browser:

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

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);
}

But both chrome and firefox throw a Access-Control-Allow-Origin header not set error. Specifically in firefox: "(Reason: CORS header 'Access-Control-Allow-Origin' missing)."

但是chrome和firefox都抛出了一个Access-Control-Allow-Origin标头没有设置错误。特别是在firefox中：“（原因：CORS标题'Access-Control-Allow-Origin'缺失）。”

1 个解决方案

#1

The Access-Control-Allow-Headers header does not allow wildcards. It must contain actual header names.

Access-Control-Allow-Headers标头不允许使用通配符。它必须包含实际的标题名称。

Look at preflight request in your network tab.The values in Access-Control-Request-Headers header must be included as AllowedHeader.

查看网络选项卡中的预检请求.Access-Control-Request-Headers标头中的值必须包含在AllowedHeader中。

#1