CORS error in AngularJS app

Question

I am getting following error when I try to make a POST request from my localhost app:

XMLHttpRequest cannot load https://www.xxx..yy/json/orders. Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values '*, http://localhost:9000', but only one is allowed. Origin 'http://localhost:9000' is therefore not allowed access.

This is my app structure in brief:

ctrl:
.controller('myCtrl', function ($scope,$http) {
      var urlBase = "https://xxx/json/";
      console.log("Hello...");
                 
      $scope.startDirectTransaction = function() {
        console.log("startDirectTransaction form...");
        
       $http({method: 'POST', url: urlBase + 'orders', headers: {
            'api_key': 'xxx'}
        }).then(function(response){ 
              $scope.related = response.data;
              console.log("Success!"); 
            });

      };
app:

<!-- begin snippet: js hide: false -->

have you set the CORS headers on the server side code? CORS error occurs when cross domain requests are being made, I see only localhost? — Amresh Venugopal, Apr 22 '16 at 08:33
See http://stackoverflow.com/questions/22343384/the-access-control-allow-origin-header-contains-multiple-values — karlingen, Apr 22 '16 at 08:38
I have no control over server side code. So need a workaround. — Smitha, Apr 22 '16 at 08:45

score 1 · Answer 1 · answered Apr 22 '16 at 08:38

1

You are trying to POST a data from your local app to a different domain. In general this is against CORS policy.

Solution for this issue is the domain which you are trying to post the data should allow via Access-Control-Allow-Origin

Read more about CORS in https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

answered Apr 22 '16 at 08:38

Hari Prakash

21
2

I have no control over server side code. So need a workaround. – Smitha Apr 22 '16 at 09:44
even with Access-Control-Allow-Origin enabled since it is a POST request the content type will be converted from application/json to plain text. I came accross these problem and the workaround that worked for me is to create my own api that forwards this request. I don't think there is a way to overcome it with the browser since CORS policies are browser specific. – DB.Null Apr 22 '16 at 10:45

CORS error in AngularJS app

1 Answers1