Доступ к Amazon s3 с помощью http в angular2

У меня есть файл .json в моем ведре 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>

Может ли кто-нибудь помочь мне решить эту проблему Заранее спасибо


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› ‹AllowedOrigin› * ‹/Allowed ‹rigin› ‹AllowedMethod› GET ‹/AllowedMethod› ‹AllowedMethod› POST ‹/AllowedConderMethod› ‹/MaxAgeSeconds› ‹AllowedHeader› * ‹/AllowedHeader› ‹/CORSRule› ‹/CORSConfiguration› - person skid; 04.02.2017
comment
@skid можно найти здесь для устранения проблем cors на 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 находятся в разделе Permission settings для вашего сегмента:

введите описание изображения здесь

person Justin Smith    schedule 03.02.2017
comment
Вот мой xml ‹CORSConfiguration› ‹CORSRule› ‹AllowedOrigin› * ‹/AllowedOrigin› ‹AllowedMethod› GET ‹/AllowedMethod› ‹MaxAgeSeconds› 3000/MaxAgeSeconds›AllowedHeaderl›free› Я предполагаю, что * дает доступ ко всем 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