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

Check out this post, it might help you: stackoverflow.com/questions/21102690/… — JanR
– JanR, Commented Apr 20, 2016 at 5: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
– Keyur Sakaria, Commented Apr 20, 2016 at 5: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 thirdparty.url.com. (Reason: CORS header 'Access-Control-Allow-Origin' missing)." — CaptainMorgan
– CaptainMorgan, Commented Apr 20, 2016 at 5: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
– CaptainMorgan, Commented Apr 20, 2016 at 6:02

refactor · Accepted Answer · 2016-04-20 06:19:48Z

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.

answered Apr 20, 2016 at 6:19

refactor

15.3k25 gold badges73 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ayo K · Accepted Answer · 2016-04-20 05:58:11Z

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, 2016 at 5:58

Ayo K

1,7842 gold badges23 silver badges37 bronze badges

2 Comments

HalfWebDev Over a year ago

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.

Ayo K Over a year ago

That won't help once it's deployed. You won't expect normal users to do that

Shubham Khatri · Accepted Answer · 2016-04-20 06:07:54Z

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, 2016 at 6:07

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Comments

HalfWebDev · Accepted Answer · 2016-04-20 06:14:53Z

0

Add the extension CORS

to your chrome browser.

answered Apr 20, 2016 at 6:14

HalfWebDev

7,74814 gold badges72 silver badges110 bronze badges

2 Comments

CaptainMorgan Over a year ago

How does this help when in production?

HalfWebDev Over a year ago

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.

Hashir Hussain · Accepted Answer · 2016-04-20 06:19:39Z

0

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

HTTP access control (CORS)

answered Apr 20, 2016 at 6:19

Hashir Hussain

6924 gold badges9 silver badges28 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

2 Comments

Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

2 Comments

Comments

Linked

Related