Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I have a simple jQuery AJAX POST code:

$.ajax({
    type: "POST",
    url: AppConstants.URLs.PROXY,
    data: message,
    xhrFields: {
        withCredentials: true
    },
    success: function(data, status, xhr) {
        console.log("Cookie: " + xhr.getResponseHeader("Set-Cookie"));
    }
});

and I wish to get the cookie and save it using cookies-js.

But according to http://www.w3.org/TR/XMLHttpRequest/#the-getallresponseheaders%28%29-method:

  1. Return all response headers, excluding headers that are a case-insensitive match for Set-Cookie or Set-Cookie2, as a single string, with each header line separated by a U+000D CR U+000A LF pair, excluding the status line, and with each header name and header value separated by a U+003A COLON U+0020 SPACE pair.

Using the Network tool in Chrome, "Set-Cookie" is visible in the Response headers. I also verified that the "Set-Cookie" header appears using curl.

What do I have to do to save the cookie in my front end app? Also, my app is running on https only.

I'd gladly provide more details upon request.

like image 367
ton Avatar asked Apr 27 '15 12:04

ton


People also ask

Can an AJAX response set a cookie?

Yes, you can set cookie in the AJAX request in the server-side code just as you'd do for a normal request since the server cannot differentiate between a normal request or an AJAX request.

How do you store cookie responses?

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.

Does AJAX use Get or POST?

By default, Ajax requests are sent using the GET HTTP method. If the POST method is required, the method can be specified by setting a value for the type option. This option affects how the contents of the data option are sent to the server.

How set a cookie in jquery AJAX?

ajax({ type: "GET", url: "http://example.com", cache: false, setCookies: "lkfh89asdhjahska7al446dfg5kgfbfgdhfdbfgcvbcbc dfskljvdfhpl", crossDomain: true, dataType: 'json', success: function (data) { alert(data); });


2 Answers

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.

like image 84
Quentin Avatar answered Oct 06 '22 00:10

Quentin


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?

like image 31
MrE Avatar answered Oct 05 '22 23:10

MrE