訪問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

回答

相關問題