How to set up CORS in an AJAX request

Question

I have been working on a personal webapp and have hit a little snag. My API calls only work for some APIs and not for others. For the ones it doesn't work with I will usually get an error message like so.

XMLHttpRequest cannot load https://api.meetup.com/2/cities. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

After doing some research I know it is to do with CORS not being setup. I was wondering if it would be possible to set this up in the client when making an AJAX request. The current way I am doing this is like so

var handleRequest = function(request){ $.ajax({ type: "GET", url: request, success: function(data) { var rawJSON = JSON.stringify(data, null, 2); editor.setValue(rawJSON); }, dataType: 'json' });

The server you request the data from has to enable CORS. There is no way to do this on the client side. — t.niese
– t.niese, Commented Dec 11, 2016 at 16:31
No, because that would make cross-origin request restrictions completely pointless. — JJJ
– JJJ, Commented Dec 11, 2016 at 16:32
Then how to applications like postman work? They are built for their users to make API calls. — Mr Spartacus
– Mr Spartacus, Commented Dec 11, 2016 at 16:34
Applications don't have the same restrictions as web sites accessed with browsers. — JJJ
– JJJ, Commented Dec 11, 2016 at 16:36
In that case could I set this up to send requests to my own server to then make the api calls? — Mr Spartacus
– Mr Spartacus, Commented Dec 11, 2016 at 16:40

dtdesign · Accepted Answer · 2016-12-11 16:45:09Z

The server you're trying to access has to grant you permission to access it. An IT admin has to provide you with a URL that grants you permission to hit their external server. The server you are trying to hit has to setup CORS. http://enable-cors.org/

Vladimir M · Accepted Answer · 2016-12-11 16:36:28Z

2

According to their docs they support JSONP.

https://www.meetup.com/meetup_api/

This is your way around CORS.

answered Dec 11, 2016 at 16:36

Vladimir M

4,4891 gold badge21 silver badges26 bronze badges

5 Comments

Mr Spartacus Over a year ago

This is just one example of an API call that my application would make. I am just making something like postman as a bit of fun. I realise now that I am probably asking the wrong question. Is it possible to make it so that I can receive a response from any api call, given the correct authentication details? e.g. apis that support jsonp and others that support json?

Vladimir M Over a year ago

it all depends on the service you are trying to call. if service supports and allows to use JSONP, then you are fine (cause it essentially loads the responses as scripts). In other cases you need access to the server code to make browsers happy with the responses, since browser will reject responses of origins headers do not match.

Mr Spartacus Over a year ago

So I am still a little confused. Is it only applications that are running on the browser that will suffer from this issue? For instance I could easily use curl to make the same call and get a response whereas if I use my application in the browser it will fail for some.

Vladimir M Over a year ago

yes. it is a security feature of the browsers which is meant to protect the users from some attacks.

Mr Spartacus Over a year ago

In that case it seems the solution to my problem is to make the API calls from an application on a server and, from the browser, make requests to my application. The only problem with this is my server's IP is going to be the one making all of the API calls which means it could get blocked. I want the users IP to be the one making the requests.

Collectives™ on Stack Overflow

How to set up CORS in an AJAX request

2 Answers 2

Comments

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Related