1

这是提出请求

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.

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

4

1 回答 1

2

很难说出了什么问题，什么也没有跳出来……尽管根据我的经验，问题更多是关于签名 URL 与 S3 接收到的内容相匹配。

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

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

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

从构造 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>

希望这对您或将来的其他人有所帮助。

于 2018-06-26T16:41:24.343 回答