AngularJS No 'Access-Control-Allow-Origin'

Question

This question already has answers here:

XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin (17 answers)

Closed 3 years ago.

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

This means that your http://thirdparty.url.com/ Does not accept requests from external sources that is/are not from http://thirdparty.url.com/, so you have to enable it from your thirdparty.url.com

Answer 2

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.

Answer 3

Add the extension CORS

to your chrome browser.

Answer 4

Access-Control-Allow-Origin header needs to be added in the thirdparty.url.com that you are trying to access and not in your own code. It is for the website to control allowing access to the users, So you can do anything about it from your side.

Answer 5

You can't enable CORS from client side. I should set at server level.

HTTP access control (CORS)