AngularJS No 'Access-Control-Allow-Origin' header

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

Check out this post, it might help you: http://stackoverflow.com/questions/21102690/angularjs-not-detecting-access-control-allow-origin-header — JanR, Apr 20 '16 at 05:54
the server does not allow your url to access the data. You can either access using JSONP or ask the server side developer to allow your url to access the data — Keyur Sakaria, Apr 20 '16 at 05:55
I don't think that is a chrome problem. I tried in Firefox and get the error "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://thirdparty.url.com/. (Reason: CORS header 'Access-Control-Allow-Origin' missing)." — CaptainMorgan, Apr 20 '16 at 05:59
If I were to deploy my app to an actual website (that isn't local host) then am i right to believe that the 3rd party URL should accept my request? — CaptainMorgan, Apr 20 '16 at 06:02

score 2 · Answer 1 · answered Apr 20 '16 at 06:19

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.

score 1 · Accepted Answer · answered Apr 20 '16 at 05:58

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

answered Apr 20 '16 at 05:58

Ayo K

1,719
2
22
34

This is true but I doubt if it offers a solution in every case (imagine we don't have permission to access the header of third party manually) as the headers can be modified from the browser to make a CORS request. Posted my answer below. – HalfWebDev Apr 20 '16 at 06:16
That won't help once it's deployed. You won't expect normal users to do that – Ayo K Apr 20 '16 at 06:18

score 1 · Answer 3 · answered Apr 20 '16 at 06:07

1

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.

answered Apr 20 '16 at 06:07

Shubham Khatri

270,417
55
406
400

score 0 · Answer 4 · answered Apr 20 '16 at 06:14

0

Add the extension CORS

to your chrome browser.

answered Apr 20 '16 at 06:14

HalfWebDev

7,022
12
65
103

1

How does this help when in production? – CaptainMorgan Apr 20 '16 at 06:16
I see. I just saw localhost from the question and was trying to give a solution on basis of that. I agree that it won't help in production. – HalfWebDev Apr 20 '16 at 06:20

score 0 · Answer 5 · answered Apr 20 '16 at 06:19

0

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

HTTP access control (CORS)

answered Apr 20 '16 at 06:19

Hashir Hussain

614
4
8
27

AngularJS No 'Access-Control-Allow-Origin' header

5 Answers5

Linked