Access Amazon s3 using http in angular2

Question

I have a .json file in my Amazon s3 bucket when i try to access the file using http call in my Angular2 app i am getting an error

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://s3.us-east-2.amazonaws.com/....../list.json. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

I made the file in my bucket to be public and gave the access as read, write and edit.

Here is my Angular Code:

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;});
    }

My cross origin XML in AWS

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

Can anyone help me resolving this issue Thanks in advance

score 10 · Accepted Answer · answered Feb 03 '17 at 22:34

Probably nothing to do with your Angular code. Take a look at AWS S3 docs on CORS. You need to set up a CORS configuration in your bucket. The docs provide this as an example:

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

The docs also say:

To configure your bucket to allow cross-origin requests, you create a CORS configuration, an XML document with rules that identify the origins that you will allow to access your bucket, the operations (HTTP methods) will support for each origin, and other operation-specific information.

This allows you to decide which origins can access your bucket (for example, if you want all origins to be able to access it, you can use the wildcard *).

@skid take a look here for debugging cors issues on s3: http://stackoverflow.com/a/17955778/2714730 — Josh Beam, Feb 03 '17 at 23:03

score 2 · Answer 2 · answered Feb 03 '17 at 22:34

You will need to edit your CORS Configuration in S3 to pass an AllowedOrigin header:

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

The settings for CORS Configuration are under the Permission settings for your bucket:

Here is my xml * GET 3000 Authorization I assume * gives access to all the url if i am correct — skid, Feb 03 '17 at 22:52

score -1 · Answer 3 · edited May 23 '17 at 12:02

You can see this article:

Example:

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);
        });
    };
});

References

<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/

post is about angular2+, not angularjs – szymeo Jul 21 '21 at 07:47 — szymeo, Jul 21 '21 at 07:47

Access Amazon s3 using http in angular2

3 Answers3

Linked