Достъп до Amazon s3 чрез http в angular2

Имам .json файл в моята кофа на Amazon s3, когато се опитвам да осъществя достъп до файла чрез http повикване в моето приложение Angular2, получавам грешка

Блокирана заявка за кръстосано начало: Политиката за същия произход забранява четенето на отдалечения ресурс на 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;});
    }

Моят кръстосано произход 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>

Може ли някой да ми помогне да разреша този проблем Благодаря предварително


http javascript amazon-web-services angular amazon-s3
person skid    schedule 03.02.2017    source източник

Отговори (3)


arrow_upward
9
arrow_downward

Вероятно няма нищо общо с вашия 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 методи) ще поддържат за всеки произход и друга операция - конкретна информация.

Това ви позволява да решите кои източници имат достъп до вашата кофа (например, ако искате всички източници да имат достъп до нея, можете да използвате заместващия знак *).

person Josh Beam    schedule 03.02.2017
comment
‹CorsConfiguration› ‹corsrule› ‹Разрешено Ororigin›*‹/Разрешеноригин› ‹Разрешен method› Вземете ‹/разрешен method› ‹Разрешен method› Публикуване ‹/разрешен method› ‹Разрешен method› Поставете ‹/разрешен› ‹Разрешен ‹/MaxAgeSeconds› ‹AllowedHeader›*‹/AllowedHeader› ‹/CORSRule› ‹/CORSConfiguration› - person skid; 04.02.2017
comment
@skid погледнете тук за проблеми с корс отстраняване на грешки на s3: stackoverflow.com/a/17955778/2714730 - person Josh Beam; 04.02.2017

arrow_upward
2
arrow_downward

Ще трябва да редактирате вашата CORS конфигурация в S3, за да подадете заглавка 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 Configuration са под настройките за разрешение за вашата кофа:

въведете описание на изображението тук

person Justin Smith    schedule 03.02.2017
comment
Here is my xml ‹CORSConfiguration› ‹CORSRule› ‹AllowedOrigin›*‹/AllowedOrigin› ‹AllowedMethod›GET‹/AllowedMethod› ‹MaxAgeSeconds›3000‹/MaxAgeSeconds› ‹AllowedHeader›Authorization‹/AllowedHeader› ‹/CORSRule› ‹/CORSConfiguration› Предполагам, че * дава достъп до всички URL адреси, ако съм прав - person skid; 04.02.2017

arrow_upward
-1
arrow_downward

Можете да видите тази статия:

  1. Как да получите ресурс от кръстосан произход заявката за публикуване на споделяне (CORS) работи

  2. Как да активирам cors заявка с 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/

person Vinicius Câmara    schedule 03.02.2017
comment
публикацията е за angular2+, а не за angularjs - person sgracki; 21.07.2021