Angular + CORS bug ?

9,097 views
Skip to first unread message

john tigernassau

unread,
Aug 12, 2013, 9:14:50 PM8/12/13
to ang...@googlegroups.com
our rest server works with CURL, not with Angular http.   Any help appreciated

We've tried every CORS option we can find but angular still reports an error with different origin

Node Express running on port 3026:

app.post('/api/account', function(req,res) {
  //res.header("Access-Control-Allow-Origin","http://localhost:3025");
  res.header("Access-Control-Allow-Origin","*");
  res.header("Access-Control-Allow-Headers","X-Requested-With");
  res.header("Access-Control-Allow-Methods","GET, POST");
  ....

Our CURL test posts data just fine into our Node Express server

curl -i -X POST http://localhost:8026/api/account -d '{"accountname":"test", ....
"password":"xxx"}' -H "Content-Type: application/json"


angular running on port 3025:

angular config: (doesn't work with / without)

app.config(['$httpProvider', function($httpProvider) {
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common['X-Requested-With'];
    }
]);

angular controller:

  $scope.subscribe = function() {
    var resturl = 'http://localhost:3026/api/account';
    var jsondata = JSON.stringify($scope.account);
    $http({
      method : 'POST',
      url    : resturl,
      data   : $scope.account,
      headers: {'Content-Type':'application/json'}
    }).
      success(function(data){....

angular error msg:

XMLHttpRequest cannot load http://localhost:3026/api/account
Origin http://localhost:3025 is not allowed by Access-Control-Allow-Origin. 
localhost/:1 error

James Allanson

unread,
Aug 13, 2013, 2:21:37 AM8/13/13
to ang...@googlegroups.com
It sounds like you need to configure your server to respond to pre-flight requests (the OPTIONS method). There's a node package for using CORS with Express, which looks pretty simple to use.

https://npmjs.org/package/cors#enabling-cors-pre-flight

Jose Luis Rivas

unread,
Aug 13, 2013, 3:02:56 AM8/13/13
to ang...@googlegroups.com
On 8/12/13 6:14 PM, john tigernassau wrote:
> our rest server works with CURL, not with Angular http. Any help
> appreciated
>
> We've tried every CORS option we can find but angular still reports an
> error with different origin
>
> Node Express running on port 3026:
>
> app.post('/api/account', function(req,res) {
> //res.header("Access-Control-Allow-Origin","http://localhost:3025");
> res.header("Access-Control-Allow-Origin","*");
> res.header("Access-Control-Allow-Headers","X-Requested-With");
> res.header("Access-Control-Allow-Methods","GET, POST");
> ....

In that last line, add "OPTIONS" to the list of methods.


--
Jose Luis Rivas
http://joseluisrivas.net/

TigerNassau

unread,
Aug 13, 2013, 11:46:07 AM8/13/13
to ang...@googlegroups.com
Added OPTIONS but still does not work (:

Sent from my LG Mobile

>--
>You received this message because you are subscribed to the Google Groups "AngularJS" group.
>To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
>To post to this group, send email to ang...@googlegroups.com.
>Visit this group at http://groups.google.com/group/angular.
>For more options, visit https://groups.google.com/groups/opt_out.
>
>

James Allanson

unread,
Aug 13, 2013, 12:42:47 PM8/13/13
to ang...@googlegroups.com
Have you added a handler for the OPTIONS verb? Something like this:

https://gist.github.com/JimAllanson/d7056f202125dbc1ed8c

TigerNassau

unread,
Aug 13, 2013, 3:12:30 PM8/13/13
to ang...@googlegroups.com
Still no go. We added the options line but angular still does not connect - if Curl works angular http should work - is there any "official" example that works? This is a complete showstopper so any help apprciated. Thks

Sent from my LG Mobile

James Allanson <j...@jimallanson.com> wrote:

>It sounds like you need to configure your server to respond to pre-flight requests (the OPTIONS method). There's a node package for using CORS with Express, which looks pretty simple to use.
>
>https://npmjs.org/package/cors#enabling-cors-pre-flight
>

Jose Luis Rivas

unread,
Aug 13, 2013, 3:14:15 PM8/13/13
to ang...@googlegroups.com
On 8/13/13 12:12 PM, TigerNassau wrote:
> Still no go. We added the options line but angular still does not connect - if Curl works angular http should work - is there any "official" example that works? This is a complete showstopper so any help apprciated. Thks

This is how I respond to OPTIONS methods with my server in restify. Is
fairly similar to Express so you should be using something like that:

https://gist.github.com/ghostbar/78afb29bba823453cdf7

john.tiger

unread,
Aug 13, 2013, 6:17:28 PM8/13/13
to ang...@googlegroups.com
On 08/13/2013 10:42 AM, James Allanson wrote:
Have you added a handler for the OPTIONS verb? Something like this:

https://gist.github.com/JimAllanson/d7056f202125dbc1ed8c

On Tuesday, 13 August 2013 16:46:07 UTC+1, john tigernassau wrote:
Added OPTIONS but still does not work (:

Sent from my LG Mobile

Jose Luis Rivas <ghost...@gmail.com> wrote:

>On 8/12/13 6:14 PM, john tigernassau wrote:
>> our rest server works with CURL, not with Angular http.   Any help
>> appreciated
>>
>> We've tried every CORS option we can find but angular still reports an
>> error with different origin
>>
>> Node Express running on port 3026:
>>
>> app.post('/api/account', function(req,res) {
>>   //res.header("Access-Control-Allow-Origin","http://localhost:3025");
>>   res.header("Access-Control-Allow-Origin","*");
>>   res.header("Access-Control-Allow-Headers","X-Requested-With");
>>   res.header("Access-Control-Allow-Methods","GET, POST");
>>   ....
>
>In that last line, add "OPTIONS" to the list of methods.
>
>
>--


Luis, James
thks for your suggestions.

arrrgh, still no go even trying the restify option suggestions - here's the core of what we have been trying
1) should the allowed header options be in an array [] ?
2) would we want options like "authorization" when there isn't any corresponding call in our angular http setup ?
3) with Curl, the only header was for application/json - shouldn't that be the only header option required ? 

Does angular really work with REST with the api on another server / port ?

express:
  res.header('Access-Control-Allow-Credentials'),true;

  //res.header("Access-Control-Allow-Origin","http://localhost:3025");
  res.header('Access-Control-Allow-Origin','*');
  //res.header("Access-Control-Allow-Headers","X-Requested-With");
  res.header('Access-Control-Allow-Methods','GET,HEAD,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers',
    ['Accept','Accept-Version','Content-Type','Api-Version','Authorization']);

angular:

      method : 'POST',
      url    : resturl,
      data   : $scope.user,
      headers: {'Content-Type':'application/json'}


Joseph Curtin

unread,
Aug 13, 2013, 6:24:18 PM8/13/13
to ang...@googlegroups.com
Maybe I missed this data already, but can you submit an example of your request? What it looks like on a network panel or the result of a curl with a request/response headerdump. 

Cheers,


--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
 
 



--
-Joseph Curtin
http://www.jbcurtin.com
@jbcurtin

Jim Allanson

unread,
Aug 13, 2013, 7:01:24 PM8/13/13
to ang...@googlegroups.com


--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/z7cVEI-Jo3s/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

TigerNassau

unread,
Aug 14, 2013, 1:26:30 PM8/14/13
to ang...@googlegroups.com
@James
Thks for sample - did not.know about express app.options

Could not get plunker to display on laptop running chrome on debian and really screwy on my mobile android - any chance you could post angular code on forum or gist or jsfiddle? Thks - will try to slay this CORS beast

Sent from my LG Mobile

Jim Allanson <j...@jimallanson.com> wrote:

>>>> >> //res.header("Access-Control-**Allow-Origin","http://**
>>>> localhost:3025 <http://localhost:3025>");
>>>> >> res.header("Access-Control-**Allow-Origin","*");
>>>> >> res.header("Access-Control-**Allow-Headers","X-Requested-**With");
>>>> >> res.header("Access-Control-**Allow-Methods","GET, POST");


>>>> >> ....
>>>> >
>>>> >In that last line, add "OPTIONS" to the list of methods.
>>>> >
>>>> >
>>>> >--
>>>>
>>>
>>> Luis, James
>>> thks for your suggestions.
>>>
>>> arrrgh, still no go even trying the restify option suggestions - here's
>>> the core of what we have been trying
>>> 1) should the allowed header options be in an array [] ?
>>> 2) would we want options like "authorization" when there isn't any
>>> corresponding call in our angular http setup ?
>>> 3) with Curl, the only header was for application/json - shouldn't that
>>> be the only header option required ?
>>>
>>> Does angular really work with REST with the api on another server / port
>>> ?
>>>
>>> express:
>>> res.header('Access-Control-Allow-Credentials'),true;
>>>

>>> //res.header("Access-Control-Allow-Origin","http://localhost:3025"<http://localhost:3025>


>>> );
>>> res.header('Access-Control-Allow-Origin','*');
>>> //res.header("Access-Control-Allow-Headers","X-Requested-With");
>>>
>>> res.header('Access-Control-Allow-Methods','GET,HEAD,PUT,POST,DELETE,OPTIONS');
>>> res.header('Access-Control-Allow-Headers',
>>>
>>> ['Accept','Accept-Version','Content-Type','Api-Version','Authorization']);
>>>
>>> angular:
>>>
>>> method : 'POST',
>>> url : resturl,
>>> data : $scope.user,
>>> headers: {'Content-Type':'application/json'}
>>>
>>>
>>> --
>>> You received this message because you are subscribed to the Google Groups
>>> "AngularJS" group.
>>> To unsubscribe from this group and stop receiving emails from it, send an
>>> email to angular+u...@googlegroups.com.
>>>
>>> To post to this group, send email to ang...@googlegroups.com.
>>> Visit this group at http://groups.google.com/group/angular.
>>> For more options, visit https://groups.google.com/groups/opt_out.
>>>
>>>
>>>
>>
>>
>>
>> --
>> -Joseph Curtin
>> http://www.jbcurtin.com

>> <http://www.jbcurtin.com>github <http://goo.gl/d5uPH>
>> @jbcurtin
>> **


>>
>> --
>> You received this message because you are subscribed to a topic in the
>> Google Groups "AngularJS" group.
>> To unsubscribe from this topic, visit
>> https://groups.google.com/d/topic/angular/z7cVEI-Jo3s/unsubscribe.
>> To unsubscribe from this group and all its topics, send an email to
>> angular+u...@googlegroups.com.
>> To post to this group, send email to ang...@googlegroups.com.
>> Visit this group at http://groups.google.com/group/angular.
>> For more options, visit https://groups.google.com/groups/opt_out.
>>
>>
>>
>

James Allanson

unread,
Aug 14, 2013, 1:38:59 PM8/14/13
to ang...@googlegroups.com
Sure - the Angular code was just a basic $http, I think I copied it from your example:

  $http({
    method : 'POST',
    url    : 'http://localhost:3000/',
    data   : {'hello': 'world'},
    headers: {'Content-Type':'application/json'}
  }).then(
    function(response){
      $scope.response = response;
    })

TigerNassau

unread,
Aug 14, 2013, 2:42:33 PM8/14/13
to ang...@googlegroups.com
Changed to your server code. Curl still works. App now hanging - no js errors, no response on server

We are ruuning ang 1.15. Node .10.12, chromium on debian - will test on firefox - what browser and os are you running -

Sent from my LG Mobile

James Allanson <j...@jimallanson.com> wrote:

>Sure - the Angular code was just a basic $http, I think I copied it from
>your example:
>
> $http({
>> method : 'POST',
>> url : 'http://localhost:3000/',
>> data : {'hello': 'world'},
>> headers: {'Content-Type':'application/json'}
>> }).then(
>> function(response){
>> $scope.response = response;
>> })
>
>
>On Wednesday, 14 August 2013 18:26:30 UTC+1, john tigernassau wrote:
>>
>> @James
>> Thks for sample - did not.know about express app.options
>>
>> Could not get plunker to display on laptop running chrome on debian and
>> really screwy on my mobile android - any chance you could post angular code
>> on forum or gist or jsfiddle? Thks - will try to slay this CORS beast
>>
>> Sent from my LG Mobile
>>

>> Jim Allanson <j...@jimallanson.com <javascript:>> wrote:
>>
>> >These work for me:
>> >
>> >Server
>> >https://gist.github.com/JimAllanson/e6c0de248e6e7142e26c
>> >
>> >Client:
>> >http://plnkr.co/edit/kJzhRFiU9rHiXEUpxDoN?p=preview
>> >
>> >

>> >On 13 August 2013 23:24, Joseph Curtin <joseph...@gmail.com <javascript:>>

>> wrote:
>> >
>> >> Maybe I missed this data already, but can you submit an example of your
>> >> request? What it looks like on a network panel or the result of a curl
>> with
>> >> a request/response headerdump.
>> >>
>> >> Cheers,
>> >>
>> >>

>> >> On Tue, Aug 13, 2013 at 5:17 PM, john.tiger <john.tig...@gmail.com<javascript:>

>> >>> email to angular+u...@googlegroups.com <javascript:>.
>> >>>
>> >>> To post to this group, send email to ang...@googlegroups.com<javascript:>


>> .
>> >>> Visit this group at http://groups.google.com/group/angular.
>> >>> For more options, visit https://groups.google.com/groups/opt_out.
>> >>>
>> >>>
>> >>>
>> >>
>> >>
>> >>
>> >> --
>> >> -Joseph Curtin
>> >> http://www.jbcurtin.com
>> >> <http://www.jbcurtin.com>github <http://goo.gl/d5uPH>
>> >> @jbcurtin
>> >> **
>> >>
>> >> --
>> >> You received this message because you are subscribed to a topic in the
>> >> Google Groups "AngularJS" group.
>> >> To unsubscribe from this topic, visit
>> >> https://groups.google.com/d/topic/angular/z7cVEI-Jo3s/unsubscribe.
>> >> To unsubscribe from this group and all its topics, send an email to

>> >> angular+u...@googlegroups.com <javascript:>.
>> >> To post to this group, send email to ang...@googlegroups.com<javascript:>


>> .
>> >> Visit this group at http://groups.google.com/group/angular.
>> >> For more options, visit https://groups.google.com/groups/opt_out.
>> >>
>> >>
>> >>
>> >
>> >--
>> >You received this message because you are subscribed to the Google Groups
>> "AngularJS" group.
>> >To unsubscribe from this group and stop receiving emails from it, send an

>> email to angular+u...@googlegroups.com <javascript:>.
>> >To post to this group, send email to ang...@googlegroups.com<javascript:>

Jim Allanson

unread,
Aug 14, 2013, 2:57:57 PM8/14/13
to ang...@googlegroups.com

I tested it on Chrome (latest) for Windows. I'll try to take a look from a Debian environment later, I'm on a train at the moment. You might want to try using a debugging proxy like Charles or Fiddler to get a full log of the requests and responses - if you can post these it might help narrow it down.

To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

AJ Mercer

unread,
Aug 14, 2013, 6:31:45 PM8/14/13
to ang...@googlegroups.com
Chome Browser has dev tools that show network traffic and for each file you can check request and response headers.

And then there is firebug for firefox.

Safari and IE have dev tools as well.

Jose Luis Rivas

unread,
Aug 14, 2013, 9:32:39 PM8/14/13
to ang...@googlegroups.com

You must be doing something wrong there.  have been using a very similar stack and had no issues. And your problem is not in the angular side but server so dont waste your time debugging on plunkr. Check on goohle for express cors

TigerNassau

unread,
Aug 14, 2013, 10:47:40 PM8/14/13
to ang...@googlegroups.com
Wrong - why does curl work perfectly fine ? Lots of others are having problems using angular and rest so pls stop the works for me crap and lets make this simple for everyone.

findesk

unread,
Aug 15, 2013, 6:11:55 AM8/15/13
to ang...@googlegroups.com
What port are you running your server on?

In your original question, you indicate curl worked when hitting port 8026.

    curl -i -X POST http://localhost:8026/api/account -d '{"accountname":"test", 

But in Angular your 'resturl' is pointing at 3026.

    var resturl = 'http://localhost:3026/api/account';

CORS works just fine with Angular. It's a server issue not an angular issue.

Carsten Senger

unread,
Aug 15, 2013, 7:52:09 AM8/15/13
to ang...@googlegroups.com
Using curl is no proof that a request will pass the browsers security
sandbox. The browser will do the xhr requests (OPTIONS preflight and
maybe the subsequentually POST) and check against the CORS spec. That it
did not work with your original code without OPTIONS preflight is
totally right. The ContentType: application/json header required the
browser to do that.

Now it's not possible to solve the current problem without debug
information. "Application hangs" is as crappy as "works for me".
You have to analyze the http request/response to see what happens in the
browser.
Somebody mentioned Chrome dev tools and Firebug already. If they
unexpectedly don't work and you can use a debugging proxy or a tool like
wireshark.

If you get an xhr error you can read about CORS requirements here:
https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS

If you post request and response here somebody might take a look.


Cheers,

..Carsten Senger

--
Carsten Senger - Schumannstr. 38 - 65193 Wiesbaden
sen...@rehfisch.de - (0611) 5324176
PGP: gpg --recv-keys --keyserver hkp://subkeys.pgp.net 0xE374C75A
--
Carsten Senger - Schumannstr. 38 - 65193 Wiesbaden
sen...@rehfisch.de - (0611) 5324176
PGP: gpg --recv-keys --keyserver hkp://subkeys.pgp.net 0xE374C75A

signature.asc

TigerNassau

unread,
Aug 15, 2013, 11:50:15 AM8/15/13
to ang...@googlegroups.com
Just a bad post from using 3026 on one test machine snd 8026 on another

Pls stop saying angular is fine - already there have been diferences in whether defaults headers are included or not depending on version or docs. cors is tricky between server, browsers, and angular. Before you make definite statements tests need to be run and indicate what os, what browser, what server, and what version of angular

Sent from my LG Mobile

findesk <mi...@pohlschmidt.com> wrote:

>What port are you running your server on?
>

>In your original question, you indicate curl worked when hitting port *8026*
>.
>
> curl -i -X POST http://localhost:*8026*/api/account -d
>'{"accountname":"test",
>
>But in Angular your 'resturl' is pointing at *3026*.
>
> var resturl = 'http://localhost:*3026*/api/account';


>
>CORS works just fine with Angular. It's a server issue not an angular issue.
>
>>
>

James Allanson

unread,
Aug 15, 2013, 12:11:10 PM8/15/13
to ang...@googlegroups.com
We've got CORS working with Angular 1.1.5 for IE8+, Chrome, Firefox and Safari (using a Java based backend) - aside from IE support, the only issue we've run in to so far was with the preflight request (which is why I suggested looking into this first).

I'd definitely recommend that you install Charles (http://www.charlesproxy.com/) or Fiddler if you prefer, and post a copy of the logs here - it'll make it much easier for us to understand exactly what's happening.

john.tiger

unread,
Aug 15, 2013, 1:04:43 PM8/15/13
to ang...@googlegroups.com
On 08/15/2013 10:11 AM, James Allanson wrote:
We've got CORS working with Angular 1.1.5 for IE8+, Chrome, Firefox and Safari (using a Java based backend) - aside from IE support, the only issue we've run in to so far was with the preflight request (which is why I suggested looking into this first).

I'd definitely recommend that you install Charles (http://www.charlesproxy.com/) or Fiddler if you prefer, and post a copy of the logs here - it'll make it much easier for us to understand exactly what's happening.

James, thks, got your very helpful post on this yesterday and we're working on it (between other things) - looked into Charles and Fiddler - we only use open source products so exploring here and what we can get from Chrome or Firefox extensions.  We're also trying to get some Route issues resolved in 1.20rc since might as well be going forward in making sure our REST is working in that version. 

john.tiger

unread,
Aug 15, 2013, 6:42:00 PM8/15/13
to ang...@googlegroups.com
On 08/15/2013 10:11 AM, James Allanson wrote:
We've got CORS working with Angular 1.1.5 for IE8+, Chrome, Firefox and Safari (using a Java based backend) - aside from IE support, the only issue we've run in to so far was with the preflight request (which is why I suggested looking into this first).

I'd definitely recommend that you install Charles (http://www.charlesproxy.com/) or Fiddler if you prefer, and post a copy of the logs here - it'll make it much easier for us to understand exactly what's happening.


On Thursday, 15 August 2013 16:50:15 UTC+1, john tigernassau wrote:
Just a bad post from using 3026 on one test machine snd 8026 on another

Pls stop saying angular is fine - already there have been diferences in whether defaults headers are included or not depending on version or docs.  cors is tricky between server, browsers, and angular.  Before you make  definite statements tests need to be run and indicate what os, what browser, what server, and what version of angular

Sent from my LG Mobile

findesk <mi...@pohlschmidt.com> wrote:

>What port are you running your server on?
>
>In your original question, you indicate curl worked when hitting port *8026*
>.
>
>    curl -i -X POST http://localhost:*8026*/api/account -d
>'{"accountname":"test",
>
>But in Angular your 'resturl' is pointing at *3026*.
>
>    var resturl = 'http://localhost:*3026*/api/account';
>
>CORS works just fine with Angular. It's a server issue not an angular issue.
>
>>
>
>--


still failing on options

@James - with your express app.options suggestion, it hangs
without - still fails on options as shown below

curl works, restclient works but those are outside browsers

we do not have good understanding how pre-flight really works but
wondering if header options
are needed to be specified in the angular $http function to force thru
pre-flight

our older backbone stack works so I'm at wits end. appreciate any more help
before we have to punt and go backwards. 

======== stack =======================
debian, angular 1.2.0rc, node .10, express, chromium (latest testing),
firefox (iceweasel)

========== Chromium output ==============
Request URL:http://localhost:3026/api/account
Request Method:OPTIONS
Status Code:404 Not Found
Request Headersview source
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, origin, content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:localhost:3026
Origin:http://localhost:3025
Referer:http://localhost:3025/
User-Agent:Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36
Response Headersview source
Connection:keep-alive
Content-Type:text/plain
Date:Thu, 15 Aug 2013 21:33:06 GMT
Transfer-Encoding:chunked
Vary:Accept-Encoding
X-Powered-By:Express


========== Firefox output ===============
OPTIONS account 404 Not Found localhost:3026 27 B 127.0.0.1:3026

Response Headersview source
Connection    keep-alive
Content-Type    text/plain
Date    Thu, 15 Aug 2013 21:22:35 GMT
Transfer-Encoding    chunked
Vary    Accept-Encoding
X-Powered-By    Express
Request Headersview source
Accept    text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding    gzip, deflate
Accept-Language    en-us,en;q=0.5
Access-Control-Request-He...    content-type
Access-Control-Request-Me...    POST
Cache-Control    no-cache
Connection    keep-alive
DNT    1
Host    localhost:3026
Origin    http://localhost:3025
Pragma    no-cache
User-Agent    Mozilla/5.0 (X11; Linux i686; rv:10.0.12) Gecko/20100101 Firefox/10.0.12 Iceweasel/10.0.12
    
16 requests

======= Express options ======================

  res.header('Access-Control-Allow-Origin','*');
  res.header('Access-Control-Allow-Methods','GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers',
    'Content-Type,Authorization,Content-Length,X-Requested-With');
   
====== angular controller http ==============
    $http({
      method : 'POST',
      url    : resturl,
      data   : jsondata,
      headers: {'Content-Type':'application/json'}
    }).


AJ Mercer

unread,
Aug 15, 2013, 6:48:34 PM8/15/13
to ang...@googlegroups.com
my guess is curl is not sending the same headers as the browser

check out this post



--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
 
 



--

TigerNassau

unread,
Aug 15, 2013, 11:22:30 PM8/15/13
to ang...@googlegroups.com
Thks for the link - yes curl with options simulating pre-flight fails

Okay further digging with mozilla mdn shows our previous apps work since we were sending data as urlencoded which they say does not invoke pre-flight - they also say options must precede post, ... but don't give example of that

So maybe 2 options are
1. Stringify json and send as urlencoded then convert back to json on server with maybe toJSON
2. Figure out how to get options preceding post but we have tried all types of exprrss suggestions with zero success

Anyone else sending json as urlencoded?

Sent from my LG Mobile

AJ Mercer <ajme...@gmail.com> wrote:

>*AJ Mercer*
><webonix:net strength="Industrial" /> <http://webonix.net> | <webonix:org
>community="Open" /> <http://webonix.org>
>http://twitter.com/webonix
>Railo Community Manager <http://www.getrailo.org/index.cfm/community/team/>

AJ Mercer

unread,
Aug 15, 2013, 11:44:23 PM8/15/13
to ang...@googlegroups.com
you do not have to call OPTIONS method your self, the browser does all that.
But you do need the server to be able to accept and process the OPTIONS call.

Jim Allanson

unread,
Aug 16, 2013, 2:38:32 AM8/16/13
to ang...@googlegroups.com

As AJ says, the options request is handled by the browser automatically, you don't need anything extra on the client side for this.

The 404 responses are what I'd expect to see when the server isn't configured to respond to options requests - could you give us more details of what happens if you leave the call to app.options in? Since the only change is on the server side, I'd still expect to see requests being made before it hangs. Also, could you describe the hanging behaviour in more detail for us? Does it seem like a JS error or something else?

Since you mentioned that you're only working with open source software, is your app itself open source? If so, seeing the full source code would help.

You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/z7cVEI-Jo3s/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

john tigernassau

unread,
Aug 16, 2013, 7:44:47 PM8/16/13
to ang...@googlegroups.com


On Friday, August 16, 2013 12:38:32 AM UTC-6, James Allanson wrote:

As AJ says, the options request is handled by the browser automatically, you don't need anything extra on the client side for this.

The 404 responses are what I'd expect to see when the server isn't configured to respond to options requests - could you give us more details of what happens if you leave the call to app.options in? Since the only change is on the server side, I'd still expect to see requests being made before it hangs. Also, could you describe the hanging behaviour in more detail for us? Does it seem like a JS error or something else?


@jim  

re options:
my last post (based on a post I read by Remy Sharp) was that pre-flight requires
that options gets returned before Post and this is really tricky depending on 
browser, versions, .....  

else can send data via urlencoded which (reported) does not invoke pref-flight 
and the hassle of trying to get the options pre call properly returned 

I tried moving your app.options (in express) in front of the rest routes - still 
no luck - even tried an options res.send(200) hack - that works but then 
does not reach the post route - been trying all kinds of code - I've attached 
some of the lastest code + js output  - it's never getting to the inside of post
function

since need to keep our new app moving forward will also try sending url 
encoded (though not sure best way to decode to json in js vs php) - will modify 
a new test set of files based on our previous backbone stuff

express server code:

app.configure(function(){
  app.set('port', process.env.PORT || 3026);
  app.use(express.logger());
  //app.use(express.static(__dirname + '/public',{maxAge: 180000}));
  app.use(express.compress());
  app.use(express.methodOverride());
  app.use(express.bodyParser());
  app.use(app.router);
});

/* ====== REST 
======================================== */
 app.options('*', function(req,res) {
   console.log("inside app.options");
   res.header('Access-Control-Allow-Origin','*');
   res.header('Access-Control-Allow-Methods','GET,PUT,POST,DELETE,OPTIONS');
   res.header('Access-Control-Allow-Headers', 
     'Content-Type,Authorization,Content-Length,X-Requested-With');
   if ('OPTIONS' == req.method) {
       console.log("inside if options");
       res.send(200);
     }
     else {
      next();
     }
});
app.post('/api/account', function(req,res) {
  console.log("inside account function");
  res.header('Access-Control-Allow-Origin','*');
  res.header('Access-Control-Allow-Methods','GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 
    'Content-Type,Authorization,Content-Length,X-Requested-With');
  console.log("req body " + JSON.stringify(req.body));

----------------------------------
angular:
    $http({
      method : 'POST',
      url    : resturl,
      data   : $scope.user,
      headers: {'Content-Type':'application/json'}
    }).
      success(function(data){
        console.log("success");
        alert("success");
      }).

curl:
curl -i -X OPTIONS 
-H "Access-Control-Request-Method: POST" 
-d '{"accountname":"test","organization":"test"}' 
-H "Content-Type: application/json" 
-H "Origin: http://localhost:3025
-H "Access-Control-Request-Headers: X-Requested-With"  
--verbose
---------------------------------------------------

js client req/res

* About to connect() to localhost port 3026 (#0)
*   Trying ::1...
* Adding handle: conn: 0x9b084e8
* Adding handle: send: 0
* Adding handle: recv: 0
* Curl_addHandleToPipeline: length: 1
* - Conn 0 (0x9b084e8) send_pipe: 1, recv_pipe: 0
* Connection refused
*   Trying 127.0.0.1...
* Connected to localhost (127.0.0.1) port 3026 (#0)
> OPTIONS /api/account HTTP/1.1
> User-Agent: curl/7.31.0
> Host: localhost:3026
> Accept: */*
> Access-Control-Request-Method: POST
> Content-Type: application/json
> Access-Control-Request-Headers: X-Requested-With
> Content-Length: 203
* upload completely sent off: 203 out of 203 bytes
< HTTP/1.1 200 OK
HTTP/1.1 200 OK
< X-Powered-By: Express
X-Powered-By: Express
< Vary: Accept-Encoding
Vary: Accept-Encoding
< Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: *
< Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS
< Access-Control-Allow-Headers: Content-Type,Authorization,Content-Length,X-Requested-With
Access-Control-Allow-Headers: Content-Type,Authorization,Content-Length,X-Requested-With
< Content-Type: text/plain
Content-Type: text/plain
< Content-Length: 2
Content-Length: 2
< Date: Fri, 16 Aug 2013 22:24:57 GMT
Date: Fri, 16 Aug 2013 22:24:57 GMT
< Connection: keep-alive
Connection: keep-alive

* Connection #0 to host localhost left intact
OK

--------------------------------------------------

server js msgs

express listening on port 3026 
inside app.options
inside if options
127.0.0.1 - - [Fri, 16 Aug 2013 22:24:57 GMT] 
"OPTIONS /api/account HTTP/1.1" 200 2 "-" "curl/7.31.0"

and depending upon which code order I used and using next();
Error: Can't set headers after they are sent.

Walter B.

unread,
Jan 23, 2014, 12:41:56 PM1/23/14
to ang...@googlegroups.com
I have been having issues using the latest version of Chrome, AngularJS 1.2.0 rc3, and CORS set up with Apache via .htaccess.

.htaccess settings:

Header set Access-Control-Allow-Origin *
Header set Access-Control-Allow-Methods "GET,PUT,POST,DELETE,OPTIONS,PATCH"
Header set Access-Control-Allow-Headers "Content-Type,Accept"

When a page is loaded and we perform an action on our API (different domain than our site) that involves a GET/POST, everything works fine - forever. However, if the action we take performs a PUT/DELETE or other less-common verb, we have a 10 second window to perform these requests after which all future PUT/DELETE/etc requests receive no response. Here is a sample timeline to help make this more clear:

0s - page loads
1s - user clicks button that triggers a DELETE
1.2s - OPTIONS preflight request is sent, 200 OK received
1.3s - DELETE request is sent, 200 OK received
...
10.2s - user clicks button that triggers a DELETE
10.3s - DELETE request is sent and server hangs up - no response received (preflight request must be cached, as it is not sent again)

A sample successful preflight OPTIONS request is pasted below:

Request Method:OPTIONS
Status Code:200 OK

Request Headers
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, content-type
Access-Control-Request-Method:PUT
Cache-Control:no-cache
Connection:keep-alive
Pragma:no-cache
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36

Query String Parameters
access_token:*****

Response Headers
Access-Control-Allow-Headers:Content-Type,Accept
Access-Control-Allow-Methods:GET,PUT,POST,DELETE,OPTIONS,PATCH
Access-Control-Allow-Origin:*
Connection:Keep-Alive
Content-Length:194
Content-Type:application/json;charset=utf-8
Date:Thu, 23 Jan 2014 17:25:33 GMT
Keep-Alive:timeout=5, max=97
Server:Apache
Set-Cookie:ROUTEID=.0; path=/
Via:1.1 balancer
X-Powered-By:PHP/5.3.27-1ubuntu3.6

I have made changes to our .htaccess settings (such as setting a specific value for Access-Control-Allow-Origin) to verify that everything is working as expected, and have found no issues there. Open to any and all ideas/suggestions. Thanks for reading!

-Walter

Greg H.

unread,
Apr 3, 2014, 1:32:01 PM4/3/14
to ang...@googlegroups.com
hey guys,

Did anyone ever found an answer to that issue? 
I'm actually experiencing the same problems with: angular 1.2, and a rack-cors on the server side

For some reasons it's only working when my server is local...

here is when it's hitting the server side:

And i'm having exactly the same issue as you: 
XMLHttpRequest cannot load URL. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4567' is therefore not allowed access.

thx

Walter B.

unread,
Apr 3, 2014, 4:48:27 PM4/3/14
to ang...@googlegroups.com
Still happening for me. We've experimented with a solution blogged about by Foursquare (http://engineering.foursquare.com/2011/12/08/web-sites-are-clients-too/) and with a post parameter, _METHOD, containing the actual HTTP method we'd like to use. I personally like the second option, especially if your backend framework supports this functionality out of the box as ours did.

Kevin Shay

unread,
Apr 3, 2014, 9:25:58 PM4/3/14
to ang...@googlegroups.com
I haven't looked at the details of your report too carefully, but one thing we've noticed is that when the backend does not return any response at all (i.e. a timeout), the browser confusingly reports this as a CORS error due to the absence of any headers being returned. So we've seen this sort of apparent CORS issue from problems that in fact had nothing to do with CORS--the backend is just failing in some other way and not returning a response.

Kevin


--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Mathis Gardon

unread,
May 12, 2014, 12:54:34 PM5/12/14
to ang...@googlegroups.com
Sorry to dig up a relatively old post, but what kevin Shay pointed out is important : 

When using CORS with a preflight request (OPTIONS verb), if you have everything set up correctly on the CORS side, the first OPTION response is handled correctly by the browser, thus it sends the POST/... request as expected. 
But if then an error happens in your server code and the server does not respond to your normal request, the chrome/firefox dev tools will say that there was a CORS error (because they expect a response with a CORS header to complete the CORS handshake).

This is something rather annoying and if possible, it should be handled better by the browser debuggers : is there any bug ticket in ff & chrome for this problem ? I couldn't find one.

Brent Lacey

unread,
Jul 1, 2014, 6:41:40 PM7/1/14
to ang...@googlegroups.com
Just wanted to add my 2 cents as well as I have been trying to track down a similar cors issue with a get request and angular, as soon as you add a header to the request, my requests dont work. Some of the previous ops, mention working with chrome, could the cause be to the failing request (if you are sending headers) the known chrome bug with local development work. See here: https://code.google.com/p/chromium/issues/detail?id=96007

I havent come across a work around yet, but i finally had some success when trying the exact same angular app in firefox.

Brent Lacey

unread,
Jul 1, 2014, 6:58:26 PM7/1/14
to ang...@googlegroups.com
Reply all
Reply to author
Forward
0 new messages