上传到 aws 时出现跨源问题

Question

这里是放置请求

axios({
  method: 'PUT',
  url: signedRequest,
  data: file, 
  headers: {
    'Content-Type': 'multipart/form-data',
    'Access-Control-Allow-Origin': '*'
  }
})    
.then((response) => {            
   console.log(response)
}).catch((error) => {
   console.log(error)
});

这里是 cors 配置

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

这里是跨源错误

Failed to load https://tochpro.s3-us-west-2.amazonaws.com/wehab/373-285x215.jpg%20%20%20%20?AWSAccessKeyId=AKIAIH7OJGP3PNYIN5YQ&Content-Type=multipart%2Fform-data&Expires=1559998463&Signature=3iLYA0VwD3SjkHOkPfCQALvLSk0%3D: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

请帮助我摆脱这个错误...请让我知道我在这里缺少什么...

Answer 1

很难说出了什么问题，什么也没有跳出来...尽管根据我的经验，问题更多的是签名 url 与 S3 接收的匹配。

在我脑海中浮现的可能是以下一项或多项：

内容类型应该是正在上传的文件的类型，例如image/jpeg
不允许的附加参数（ACL 或 CacheControl 弄了我一段时间）
有时浏览器会妨碍本地主机或应用中的浏览器安全 headers

下面是我的工作解决方案的构建方式...

构造 url:

的 lambda 的摘录

var bodyJson = JSON.parse(event.body);
var params = {
    Bucket: process.env.BUCKET,
    Key: 'path/to/file/' + bodyJson.filename,
    Expires: 60,
    ContentType: bodyJson.filetype
};
var s3 = new aws.S3();
s3.getSignedUrl('putObject', params, function (err, url) { ... });

我在 AngularJS 中使用 ng-file-upload，但我知道这是一个标准的 http 请求：

Upload.http({
    method: 'PUT',
    url: signedUrl,
    headers : {
        'Content-Type': fileToUpload.type
    },
    data: fileToUpload
}

S3 CORS 配置：

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

希望这对您或以后的其他人有所帮助。

上传到 aws 时出现跨源问题

Cross origin issue when upload to aws

amazon-s3

amazon-web-services

reactjs

react-dropzone