AWS S3: No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

In my angular app, I have the following error when I try to make an REST api.

My Code is given below:

Angular Controller

 $scope.saveTeam = function() {

    var club = {};
    club.name = $scope.selectedClub;
    var service = API.getService();

    service.create( {}, { club: club },
      function( res ) {
      }, function(err) {
        console.log("club err : ", err);
      });

  } 

}

Angular Factory

  // Clubs service used for communicating with the coaches REST endpoint
 angular
   .module('app')
   .factory('API', ['$resource', 'session', function($resource, session) {
    var mainUrl = '/clubs';

    return {
        getService : function() {
            var token = session.getToken();
            return $resource(mainUrl, { }, {
                createClub: {
                    method: 'POST',
                    url: mainUrl,
                    isArray: false,
                    headers: { 'Token': token }
                }
            })
        }
    }
});

How can I solve this error? Thanks in Advance.

this should help: http://stackoverflow.com/questions/17533888/s3-access-control-allow-origin-header — Pevara, Jun 23 '16 at 19:33
Possible duplicate of [No 'Access-Control-Allow-Origin' header is present on the requested resource- AngularJS](http://stackoverflow.com/questions/24134117/no-access-control-allow-origin-header-is-present-on-the-requested-resource-an) — Prasheel, Jun 23 '16 at 19:42

score 0 · Answer 1 · answered Jun 23 '16 at 19:50

0

Install this chrome extension to avoid CORS error. This error generally comes because of the security headers in the request made by a client. Use the line of code shown below before making any request to server.

 $http.defaults.headers.post["Content-Type"] = "application/json";

answered Jun 23 '16 at 19:50

Prasheel

942
4
21

2

Setting `Content-Type` on request header won't do anything regarding CORS and also `"application/json"` is `$http` default anyway – charlietfl Jun 23 '16 at 20:48

score 0 · Answer 2 · edited May 23 '17 at 12:16

Working principles of CORS is a simple HEADERS game between Client and Server. The browser (the client) set in the Origin key the current domain in your case set "http://localhost:9001". The server, in turn, verified that this value is among those trusted and responds with another piece of information (always in the header) with the key Access-Control-Allow-Origin. If the two values are equal, then the browser uses the response, otherwise you will have an error.

So in the future you need to configure the server but for development you can start the Chrome browser with Disable same origin policy. With disable security the browser don't set the origin and you don't have a problem. This is the problem so check this link:

Disable same origin policy in Chrome

Another...in the chrome debug look the tab network for check the Origin and Access-Control-Allow-Origin. For fix it disable security chrome. — Alessandro, Jun 23 '16 at 21:30

AWS S3: No 'Access-Control-Allow-Origin' header is present on the requested resource

2 Answers2