AWS S3 存储桶上传 CORS 错误

Posted 2023-03-04

【中文标题】AWS S3 存储桶上传 CORS 错误

【英文标题】：CORS error on AWS S3 bucket upload

【发布时间】：2015-12-07 07:03:13

【问题描述】：

我的 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 标头未设置错误。特别是在 Firefox 中：“（原因：CORS 标头 'Access-Control-Allow-Origin' 缺失）。”

【问题讨论】：

根据我对 CORS 的了解，您必须从服务器上传，而不是从客户端上传。

从我读过的文章中，您可以直接上传到 S3 存储桶。我在服务器上运行节点，所以想避免通过上传...

你是对的，虽然我只用一个角度模块完成了它（我现在记得了）。我的错。

正如 OliverJ90 所提到的，我直接上传到存储桶没有问题。正如 Christopher Marshall 所说，我所涉及的唯一 CORS 设置涉及服务器到服务器。

“localhost”是 CORS 的有效来源吗？这似乎有点无意义，如果不是，我也不会感到惊讶。您可以尝试使用 http://lvh.me:5000/ 访问您的计算机，这是一个解析为 127.0.0.1 的测试域，就像 localhost 一样，看起来是一个真实的域名，看看它是否让浏览器更快乐。

【参考方案1】：

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

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

【讨论】：

你确定吗？ docs.aws.amazon.com/AmazonS3/latest/dev/…<AllowedHeader>*</AllowedHeader>