访问Amazon S3使用http在angular2

我在亚马逊S3存储桶一个以.json文件当我尝试使用HTTP调用访问该文件在我Angular2应用程序我得到一个错误访问Amazon S3使用http在angular2

跨来源请求阻止：相同来源策略不允许读取远程资源 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;}); 
    }

我交起源XML在AWS

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

谁能帮我提前

解决这个问题感谢

来源

2017-02-03 skid

也许无关你的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方法）将支持每个来源以及其他特定于操作的信息。

这使您可以决定哪些渊源可以访问你的水桶（例如，如果希望所有的起源到能够访问它，你可以使用通配符*）。

来源

2017-02-03 22:34:33

* GET POST PUT 删除 3000 * – skid

但还是我得到一个错误 – skid

@skid看看这里在S3上调试CORS问题：http://stackoverflow.com/a/17955778/2714730 –

你需要编辑在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配置的设置下你的水桶权限设置：

来源

2017-02-03 22:34:48

这里是我的xml * GET < MaxAgeSeconds> 3000 授权我假设*给予访问所有的网址，如果我是正确的 – skid

你可以看到这篇文章：

实施例：

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/

来源

2017-02-03 22:37:29

访问Amazon S3使用http在angular2

回答

相关问题