上传到AWS时出现跨源问题

时间:2018-06-26 07:38:52

标签: reactjs amazon-web-services amazon-s3 react-dropzone

在此放置请求

-(void) dealloc
{
    [self.webview cleanForDealloc];
    self.webview = nil;
    [super dealloc];

}

这里是cors config

-(void)webViewUnload {

    [self.webView loadHTMLString:@"" baseURL:nil];
    [self.webView stopLoading];
    [self.webView setDelegate:nil];
    [self.webView removeFromSuperview];

    [[NSURLCache sharedURLCache] removeAllCachedResponses];
    [[NSURLCache sharedURLCache] setDiskCapacity:0];
    [[NSURLCache sharedURLCache] setMemoryCapacity:0];
}

这是跨原点错误

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

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

1 个答案:

答案 0 :(得分:1)

很难说出这是怎么回事,什么也没有跳出来……尽管从我的经验来看,问题更多是与S3接收到的签名URL相匹配。

可能是以下一项或多项内容:

  • 内容类型应该是要上传的文件的类型,例如图片/ jpeg
  • 不允许的其他参数(ACL或CacheControl让我有一段时间)
  • 有时浏览器会与本地主机或您应用中的浏览器安全标头冲突

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

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

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