AngularJS and CORS [no JSONP]

[Kenneth Ah Young]

Hey guys, thanks for reading!

I'm creating a web app using angularjs. The web-app uses an api located on an external server, but I'm having trouble getting my web app to connect to the API.

The server's headers have been set to allow CORS, and the app works if I employ CORS through the method found on http://www.html5rocks.com/en/tutorials/cors/ . I'm trying to find a method that is angularjs-centric. I've tried using $http.get and reference the url to the api, but it throws me an XMLHttpRequest error.

If anyone can help, I would greatly appreciate it.

[Steven Holloway]

Hi Kenneth,

 I have worked through similar issues.

I need to know the following to help you:

the full error text

and the version of angular in your app

Cheers

  Steven

[Johannes Hiemer]

A small sample in a plnkr would help as well. :-)

[Mike Kozelsky]

I'm actually a noob going through the same struggles.

Here's my slimmed-down example, which should display a list of restaurant names that are retrieved from a CORS request:

http://embed.plnkr.co/R8DynAQnp6bhWFLmaHzq/preview  (let me know if that doesn't work, it's my first time using plnkr)

To note:

1) it should make the query() request when the page is rendered.

2) i added a link that simulates the example CORS request from the html5rocks tutorial.  That works fine for me and i get back the appropriate data from the server.

3) error shows up in chrome console: XMLHttpRequest cannot load http://localhost/Api/Restaurants. Origin <origin> is not allowed by Access-Control-Allow-Origin.

not sure what i'm missing.

Thanks,

~mike

On Tue, Jan 22, 2013 at 11:10 AM, Johannes Hiemer <jvhi...@gmail.com> wrote:

A small sample in a plnkr would help as well. :-)

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.

[Marco Rinck]

Mike, 

the plunker does not work as the link tries to make a request to localhost which does not work for anyone beside yourself because only you have the API server running :-) 

But besides that, I can tell you this: CORS requests doen't have anything to do with angular. Its a browser and server thing, they are handling it out by themselves (only exception is if you want to set/get cookies). 

I'm currently developing a web application by myself with CORS requests. And besides a flag for cookie transfer request are not special at all at the javascript side. Its different at server side, as the server needs to set some HTTP header for pre-flight requests (OPTIONS). 

You can find anything you want to know about CORS here: https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS

If you are using Chrome have a look at javascript console, its telling you exactly what the problem is when its blocking ajax requests. 

Marco  

[Mike Kozelsky]

It actually doesn't work for me either because i changed the name for it to be simpler than what my endpoint is : ).  I was hoping that it'd show the issue without being functional.

The main thing to illustrate was that the "raw" javascript xhr works, and the angular version doesn't.  That's what i'm currently stuck with.

~mike

[Marco Rinck]

Mike, 

Hmm? Have you got a look into my link I posted? Its all there. 

The error you mentioned earlier "Origin is not allowed by Access-Control-Allow-Origin" is explained there too. Your server has to set this HTTP header with the allowed origin URL from which you want to make CORS requests. Besides this header, 3-4 other HTTP headers need to be set too. 

Again, this is NOT angular specific, its even not a javascript problem as the server you want to send CORS requests to has to be able to handle CORS requests. 

Marco

[Steven Holloway]

Whats happening is the CORS pre-flight check. sending OPTIONS

I was getting the same error using the angular stable version 1.0.3 and earlier (1.0.1).

I after some research I found they removed the CORS preflight check in 1.1.1 unstable

It's possible to add a one liner to fix this in version earlier than 1.1.1

here is my jsfiddle that queries the spottily web api

i am using $resource (which uses $http internal)

http://jsfiddle.net/impurist/736Xr/14/

if you comment out the .config block the OPTIONS  core error will return

hope this helps

Cheers

  Steven

[Bernhard]

Hi Kenneth, like others have said, your server needs to respond with 
Access-Control-Allow-Origin: *
Instead of *, you can give the URL of your client.

Usually (not sure if AngularJS handles it the same way), your client sends an OPTIONS request the the URL specified in $http.get() and expects the response to be empty with mentioned header set.

Then (and only then), your actual response (POST, GET etc.) gets sent.

So make sure the first OPTIONS request goes through as well ;)

What kind of backend are you using?

Best regards

Bernhard

[Kenneth Ah Young]

Hey Steven,

Thank you very much for this! That little .config has fixed it and I'm now consuming data from the API.

I do have a few questions though (just for educational purposes :D ):

I was under the impression that CORS requires the pre-flight to send  OPTIONS request to the url and that this was a standard. If this is the case, why has this pre-flight check brought the error? Is it the server's issue in its allowances?

What exactly is the OPTIONS request being used for?

Sorry for the trouble, but thank you so much for the help! If there are resources which answer my questions and saves you time, could you please refer me to them? I don't want to trouble you too much.

Thanks again!

[Kenneth Ah Young]

Hey Bernhard,

Steven seems to have fixed the problem by removing the pre-flight options request so I'm under the impression that it was this request that caused the error. I'm curious now to figure out how to allow the options request to go through properly. Any ideas?

To be honest, I'm not entirely sure the specifics behind the backend but I can enquire if you'd like.

Thanks!

[Steven Holloway]

I'm my case the api I was taking to did not support OPTIONS.

If you control your api then you can add the support for the preflight check.

Hope this helps.

Cheers

  Steven

Sent from my iPhone

--

[Kenneth Ah Young]

Ah, fair enough!
Thanks Steven :).