在 angular2 中使用 http 访问 Amazon s3

Posted 2023-02-27

【中文标题】在 angular2 中使用 http 访问 Amazon s3

【英文标题】：Access Amazon s3 using http in angular2

【发布时间】：2017-06-21 09:32:48

【问题描述】：

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

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

我将存储桶中的文件设为公开，并授予读取、写入和编辑权限。

这是我的 Angular 代码：

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>

谁能帮我解决这个问题 提前致谢

【参考方案1】：

你可以看这篇文章：

How to get a cross-origin resource sharing (CORS) post request working

How to enable cors request with angular.js-resource

例子：

HTML

<div ng-app="Test">
    <div ng-controller="corsCtrl">
        <button ng-click="useHttp()">$http.get request</button>
        <button ng-click="useResource()">$resource request</button>    
    </div>
</div>

Javascript

angular.module('Test', ['ngResource']).controller('corsCtrl', function ($scope, $http, $resource) 
    $http.defaults.useXDomain = true;

    $scope.useHttp = function() 
        $http.get('http://ricardohbin.com/cors/testcors.php')
            .success(function(data) 
                alert(data.ok);
            );
    ;

    $scope.useResource = function() 
        var User = $resource('http://ricardohbin.com/cors/testcors.php', 
            userId: '@id'
        );
        User.get(
            userId: 123
        , function(data) 
            alert(data.ok);
        );
    ;
);

参考文献

<script type="text/javascript" src="http://ricardohbin.com/cors/angular.js/angular.min.js"></script>
<script type="text/javascript" src="http://ricardohbin.com/cors/angular.js/angular-resource.min.js"></script>

http://jsfiddle.net/ricardohbin/E3YEt/

【讨论】：

帖子是关于 angular2+，而不是 angularjs

【参考方案2】：

您需要在 S3 中编辑 CORS 配置以传递 AllowedOrigin 标头：

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>https://your-exact-domain.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

CORS 配置的设置位于存储桶的权限设置下：

【讨论】：

这是我的 xml *GET3000Authorization 如果我是正确的，我假设 * 可以访问所有 url

【参考方案3】：

可能与您的 Angular 代码无关。看看AWS S3 docs on CORS。您需要在存储桶中设置 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 方法）将支持每个来源，和其他特定于操作的信息。

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

【讨论】：

*GETPOSTPUTDELETE 3000*

@skid 在这里查看调试 s3 上的 cors 问题：***.com/a/17955778/2714730