Create cross subdomain cookies/sessions with AngularJS & PHP

Question

My app has the following structure: there's the front-end js app (angular) on the app. subdomain and a backend (PHP) on the root and api. subdomain. My login is done via the root which stores a session cookie. The cookie is stored for all subdomains with the path "/".

Directly on the api I can get the cookie. However on the same url but via an ajax GET call from the front-end the cookie is NULL.

But using an application like Postman (chrome app) a GET request to the same URL and I can get the cookie. So it seems to be specific to my apps frontend.

Here are my settings for my angular app. I've set these defaults in my app config:

$httpProvider.defaults.useXDomain = true;
$httpProvider.defaults.withCredentials = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];

I've tested on both Chrome and FF. Can't figure out why my cookies/sessions are unavailable between my frontend and backend

Update 20/11/2013

I also had a problem specifically with the version Angular I was using. Because I was using $resource instead of just $http, that version of angular wasn't attaching the withCredentials setting to the http request when using $resource. Updating to the latest angularjs version has fixed my problem. Because the withCredentials was not being set my cookies weren't being sent along with the xhr request. Stupidly I hadn't checked if cookies were being sent.

Answer 1

The withCredentials attribute is not enough to have it working. The server response must have the Access-Control-Allow-Credentials: true header.

You should also check the Access-Control-Request-Headers and Access-Control-Allow-Headers, as well as other Access-Control-... headers in requests and responses, and make sure the OPTIONS method requests and all CORS headers are handled properly by the server.

See also: http://www.html5rocks.com/en/tutorials/cors/