在angular2中使用http访问Amazon s3

Question

当我尝试在Angular2应用程序中使用http调用访问文件时，我的Amazon s3存储桶中有一个.json文件，但出现错误

跨域请求被阻止：“同源起源”策略不允许读取https://s3.us-east-2.amazonaws.com/....../list.json上的远程资源 。（原因：CORS标头“ Access-Control-Allow-Origin”缺失）。

我将存储桶中的文件公开，并以读取，写入和编辑的方式进行了访问。

这是我的角度代码：

getValue(){
        return this._http.get('https://s3.us-east-2.amazonaws.com/........./list.json').toPromise().then(res => <Contact[]> res.json().data)
        .then(data => {return data;});
    }

我在AWS中的跨源XML

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>DELETE</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

谁能帮助我解决这个问题，谢谢

Answer 1

可能与您的Angular代码无关。看看CORS上的AWS S3文档。您需要在存储桶中设置CORS配置。文档提供了此示例：

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>http://www.example1.com</AllowedOrigin>

   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
 <CORSRule>
   <AllowedOrigin>http://www.example2.com</AllowedOrigin>

   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

该文档还说：

要配置存储桶以允许跨域请求，您需要创建一个CORS配置，一个XML文档，其中包含一些规则，这些规则标识了您将允许访问存储桶的起源，该操作（HTTP方法）将支持每个起源，以及其他操作-具体信息。

这使您可以决定哪些起源可以访问您的存储桶（例如，如果希望所有起源都可以访问它，则可以使用通配符*）。