使用Angular2通过HTTP访问Amazon S3

Question

使用Angular2通过HTTP访问Amazon S3

javascripthttpamazon-web-servicesangularamazon-s3

5

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

跨域请求被阻止：同源策略禁止读取远程资源 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>

有人可以帮我解决这个问题吗？谢谢。

- skid

3个回答

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配置的设置位于您的存储桶权限设置下：

- Justin Smith

这是我的XML文件： <CORSConfiguration> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>Authorization</AllowedHeader> </CORSRule> </CORSConfiguration>我认为 * 表示允许访问所有的URL，如果我没错的话。 - skid

-1

你可以查看这篇文章：

例子：

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/

- Vinicius Câmara

本文是关于Angular2+的，不是关于AngularJS的。 - szymeo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Beam · Accepted Answer

可能与您的Angular代码无关。请查看AWS S3关于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方法）以及其他特定于操作的信息。

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