Problems with RESTful API and CORS over https and angularjs

[Tomas Kouba]

Hello,

the API I'd like to use with angularjs uses token based authentication.
I am trying to set up the CORS properly, but I am a bit lost.

Can anybody please help me with the following example?

The auth token is returned as a custom http header. In my example it is
 X-token header from http://tomaso.cz/token/token.html

If my angularjs "app" is sitting at http://tomaso.cz/get_token.html
(js code at http://tomaso.cz/app.js )
it works fine and I can print the token.

If I want to launch the same code from localhost the browser (firefox 29.0) issues an OPTIONS method
and gets (IMHO correct) headers:

Access-Control-Allow-Origin: *
access-control-allow-credentials: true
access-control-allow-headers: x-account, accept, access-control-request-origin
access-control-allow-methods: GET,OPTIONS

After this the GET method is issued, but the angularjs "headers" object is empty (it does not
contain the 'X-token' header.

I have also tried to put the client on a different server than localhost and it does not work at all - the OPTIONS is
issued but then browser complains: "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://tomaso.cz/token/token.html. This can be fixed by moving the resource to the same domain or enabling CORS."

I think I have changed everything on the server side to switch CORS on.

Thanks in advance for any suggestions.

Cheers,
Tomas

[Neil Camara]

Because those headers should be sent by the server and not the browser.

[Srikar Shastry]

It is my understanding that when ur angular is trying to access an Api on a different domain (same domain, different port counts too), then you need to use callbacks and make Api call using $http.jsonp or $resource with same jsonp. If it is in same domain then try this:
$http.get('/api url', {params : {}, headers:{mention headers})

I would start off with simple calls then look into promises and cross origin calls.

[Tomas Kouba]

Hello,

the Access-Control-Allow-* headers are send by the server (apache on tomaso.cz in this case).

If anyone has an example of using an API against an existing server with working CORS it would help me a lot I think.

Cheers,

--

Tomas

--
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/fNSu70g-Yy8/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/d/optout.

--
--
Tomáš Kouba

[Alejandro Paciotti]

I'm not very versed in angular or nodejs. But I think I had the same problem and solved it by putting the server in the following code:

server.js

var allowCrossDomain = require('./config/allowCrossDomain');

app.use(allowCrossDomain);

./config/allowCrossDomain.js

module.exports =  function(req, res, next) {

   res.header('Access-Control-Allow-Origin', '*');

   res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');

   res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');

   if ('OPTIONS' == req.method) {

       res.send(200);

   }

   else {

       next();

   }

};

Salute!

Alejandro...@gmail.com

--
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.

[Jeff Hubbard]

> it does not contain the 'X-token' header.

I don't see that header in the Access-Control-Allow-Headers header. You won't be able to access said header, even if the server sends it back, until that's fixed.

[Tomas Kouba]

Thank you Jeff. Now I don't get the CORS errors anymore. But the difference between

output of remote (http://tomaso.cz/get_token.html) and local (http://localhost/~koubat/localtest/get_token.html) server is still there.

The console output for the remote (same as where the "API" is):

	accept-ranges	"bytes"

	access-control-allow-credentials	"true"
	access-control-allow-headers	"x-account, accept, access-control-request-origin"
	access-control-allow-methods	"GET,OPTIONS"

	access-control-allow-origin	"*"
	content-length	"0"
	content-type	"text/html; charset=UTF-8"
	date	"Thu, 22 May 2014 16:44:57 GMT"
	etag	""606a1-0-4f9c353bd0aea""
	last-modified	"Mon, 19 May 2014 16:33:45 GMT"
	server	"Apache/2.2.15 (Scientific Linux)"
	x-token	"1234567890"

The one from localhost is much shorter:

	content-type	"text/html; charset=UTF-8"
	last-modified	"Mon, 19 May 2014 16:33:45 GMT"

--

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/fNSu70g-Yy8/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/d/optout.

--
--
Tomáš Kouba

[Eric Eslinger]

I'm doing an api server which (a) serves JSON and (b) handles the OAUTH2 dance with google / twitter / facebook, returning a token to the front-end server. The two servers are separate machines, and therefore have lots of CORS restrictions.

In general to deal with Cors, I use the cors node module - basically set up your policy and add it as middleware on the relevant routes. Pretty straightforward. 

I inject the token in an html file that results from the oauth2 dance being successful. The html file has an onLoad script that uses window.opener.postMessage to tell the original (angular) window that the login was successful and the value of the token. 

I recently gave a lightning talk at sf perl mongers about this - https://archive.org/details/sfperlmongerslightningtalks2014 (third video). 

Slides here: https://docs.google.com/presentation/d/1Drvrqu3W3SJb2_01HiDC5cGYGaA_O2_3hO8sACX9zcQ/edit?usp=sharing

--

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.