使用 <AllowedHeader>Authorization</AllowedHeader> CORS 规则将文件上传到存储桶

Posted 2023-03-04

【中文标题】使用 <AllowedHeader>Authorization</AllowedHeader> CORS 规则将文件上传到存储桶

【英文标题】：Upload files to bucket with <AllowedHeader>Authorization</AllowedHeader> CORS rules

【发布时间】：2018-04-12 22:37:11

【问题描述】：

我使用ReactS3Uploader 将文件从浏览器上传到s3。我的 CORS 规则如下：

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

如果我将<AllowedHeader>Authorization</AllowedHeader> 更改为<AllowedHeader>*</AllowedHeader>，一切正常。但是当我使用<AllowedHeader>Authorization</AllowedHeader>时出现错误：

A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'http://localhost' is therefore not allowed access. The credentials mode of an XMLHttpRequest is controlled by the withCredentials attribute.

以下是我的 ReactS3Uploader：

<ReactS3Uploader
              signingUrl="/s3/sign"
              signingUrlMethod="GET"
              //accept="image/*"
              s3path="/test"
              //signingUrlHeaders= additional: headers 
              //signingUrlQueryParams= additional: query-params 
              //signingUrlWithCredentials= true       // in case when need to pass authentication credentials via CORS
              uploadRequestHeaders= 'x-amz-acl': 'public-read'   // this is the default
              contentDisposition="auto"
              scrubFilename=(filename) => filename.replace(/[^\w\d_\-.]+/ig, '')
              server="http://localhost:3001" />

以下是我的签名服务器端代码：

app.use('/s3', require('react-s3-uploader/s3router')(
    bucket: "bucktmodel",
    region: 'us-east-1', //optional
    signatureVersion: 'v2', //optional (use for some amazon regions: frankfurt and others)
    //headers: 'Access-Control-Allow-Origin': '*', // optional
    ACL: 'private', // this is default
    uniquePrefix: true // (4.0.2 and above) default is true, setting the attribute to false preserves the original filename in S3
));

【参考方案1】：

因为：

1) 我没有上传文件的权限，所以我需要添加策略来启用上传到这个bucket；

2) 我的 CORS 设置末尾有多个空格线