AngularJS No 'Access-Control-Allow-Origin' header [duplicate]

Question

I have an AngularJS app that I need to post data to a third party URL which is used to store some data on the third party server. I get the following error when I run my code below: XMLHttpRequest cannot load http://thirdparty.url.com/. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:51491' is therefore not allowed access.

The code I'm running in my AngularJS factory is:

return $http({
            url: '//thirdparty.url.com',
            method: "POST",
            data: params_string,
            headers: {
                'Access-Control-Allow-Origin': '*',
                'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT',
                'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'
            }
        });

Answer 1

Cross-Origin Resource sharing(CORS) is a specification that defines the ways for a web server to allow its resources to be accessed by the script running in a web page from a different domain.

The Server and the client work together, using HTTP headers to make accessing cross origin resources possible.

In your case since you browser(client) is chrome/Firefox(and not the older version of IE) , the problem is not with browser.

When you make an ajax call , browser by default will add a request header

  Origin: yourdomainname

Your ajax call will only be successful when the server(http://thirdparty.url.com) sends a response similar to below

Access-Control-Allow-Origin: *

In your case , the above response header is not being sent by server.