Get and store cookie (from Set-Cookie) from an AJAX POST response

Solution 1:

You can't get the cookie data in your JS. The API won't allow you.

What do I have to do to save the cookie in my front end app?

Just set the Set-Cookie header in the response from the server side code. The browser should save it automatically.

As a developer, you may be able to inspect the value of the cookies using "Developer Tools".

And the same cookie will be sent in subsequent requests to the same domain, until the cookie expires.

Solution 2:

The browser cannot give access to 3rd party cookies like those received from ajax requests for security reasons, however it takes care of those automatically for you!

For this to work you need to:

1) login with the ajax request from which you expect cookies to be returned:

$.ajax("https://example.com/v2/login", {
     method: 'POST',
     data: {login_id: user, password: password},
     crossDomain: true,
     success: login_success,
     error: login_error
  });

2) Connect with xhrFields: { withCredentials: true } in the next ajax request(s) to use the credentials saved by the browser

$.ajax("https://example.com/v2/whatever", {
     method: 'GET',
     xhrFields: { withCredentials: true },
     crossDomain: true,
     success: whatever_success,
     error: whatever_error
  });

The browser takes care of these cookies for you even though they are not readable from the headers nor the document.cookie

see my answer here: How to get a cookie from an AJAX response?