Set-Cookie in HTTP header is ignored with AngularJS

Question

I\'m working on an application based on AngularJS on client side and Java for my API (Tomcat + Jersey for WS) on server side.

Some path of my API are restricted, if

Answer 1

In your post request on the client side, make sure to add the following:

For jquery ajax requests:

$.ajax({
  url: "http://yoururlgoeshere",
  type: "post",
  data: "somedata",
  xhrFields: {
    withCredentials: true
  }
});

With Angular's $http service :

$http.post("http://yoururlgoeshere", "somedata", {
  withCredentials: true
});

Answer 2

The addition HttpOnly means that the browser should not let plugins and JavaScript see the cookie. This is a recent convention for securer browsing. Should be used for J_SESSIONID but maybe not here.

Answer 3

I've managed to solve an issue very similar to yours. My Play! backend tried to set a session Cookie which I could not catch in Angular or store via browser.

Actually the solution involved a bit of this and a bit of that.

Assuming you've solved the initial issue, which can be solved only by adding a specific domain to the Access-Control-Allow-Origin and removing the wildcard, the next steps are:

1. You have to remove the HTTP-Only from the Set-Cookie header, otherwise you will never be able to receive a cookie "generated" by your angular code
   This setup will already work in Firefox, though not in Chrome

2. To make it work for Chrome too, you need to:

   a) send a different domain from localhost in the cookie, using the domain your WS are "hosted". You can even use wildcards like .domain.com instead of ws.domain.com

   b) then you'll need to make a call to the domain you specified in the cookie, otherwise Chrome won't store your cookie

   [optional] I would remove that /api path in favor of a /

And that should to the trick.
Hope to have been of some help

Answer 4

You need work on both the server and client side.

Client

Set $http config withCredentials to true in one of the following ways:

1. Per request

   var config = {withCredentials: true};
   $http.post(url, config);
   

2. For all requests

   angular.module("your_module_name").config(['$httpProvider',
     function($httpProvider) {
       $httpProvider.interceptors.push(['$q',
         function($q) {
           return {
             request: function(config) {
               config.withCredentials = true;
               return config;
             }
           };
         }
       ]);
     }
   ]);
   

Server

Set the response header Access-Control-Allow-Credentials to true.

Answer 5

I found an issue in AngularJS that help me to move forward.

It seems that "Access-Control-Allow-Credentials" : true was not set on the client side. Instruction $httpProvider.defaults.withCredentials = true was ignored.

I replace $resource call by a simple $http call with {withCredentials:true} in the config parameter.

Answer 6

Just solved a problem like this.

I was doing this and not working...:

  $cookies.put('JSESSIONID', response.data);

Cookies are saved in the browser, but when I sent a new request, all the cookies were sent exept mine. (my cookie is JSESSIONID)

then i look in the chrome inspector and i found this:

THE PROBLEM IS THAT WAS NOT THE CORRECT PATH!!!

then I tried this and my cookies were sent. yay! :

$cookies.put('JSESSIONID', response.data, {'path':'/'});

I do not know if this is your case, but this worked for me.

regards!