Retrieve and save the cookie provided in the Set-Cookie header of an AJAX POST reply

Question

Retrieve and save the cookie provided in the Set-Cookie header of an AJAX POST reply

Here is a straightforward jQuery AJAX POST code snippet:

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

I am looking to retrieve the cookie and store it using cookies-js.

However, as stated in the documentation at http://www.w3.org/TR/XMLHttpRequest/#the-getallresponseheaders%28%29-method:

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.

Despite seeing "Set-Cookie" in the Response headers in Chrome's Network tool, I have confirmed the presence of the "Set-Cookie" header using curl as well.

Could you please guide me on how to save the cookie in my front-end application? Additionally, note that my application operates solely on https.

If more information is needed, I'd be happy to provide it upon request.

javascript ajax cookies http-headers httpresponse

Answer 1

Answer №1

Accessing cookie data in JavaScript is restricted by the API.

What steps should I take to store a cookie in my frontend application?

To save a cookie, simply include the Set-Cookie header in your server-side response. The browser will handle the rest.

For developers, you can utilize "Developer Tools" to view the cookie values.

The same cookie will persist in subsequent requests to the domain until it expires.

Answer 2

Accessing cookie data in JavaScript is restricted by the API.

What steps should I take to store a cookie in my frontend application?

To save a cookie, simply include the Set-Cookie header in your server-side response. The browser will handle the rest.

For developers, you can utilize "Developer Tools" to view the cookie values.

The same cookie will persist in subsequent requests to the domain until it expires.

Answer 3

Answer №2

Due to security reasons, the browser is unable to grant access to third-party cookies received from ajax requests. However, it automatically handles them for you!

To make this function properly, follow these steps:

1) Log in through the ajax request that will return cookies:

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

2) Enable

xhrFields: { withCredentials: true }

in subsequent ajax requests to utilize the credentials stored by the browser

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

Even though these cookies are not visible in the headers or document.cookie, the browser manages them on your behalf.

Check out my response here: How to get a cookie from an AJAX response?

Answer 4

Due to security reasons, the browser is unable to grant access to third-party cookies received from ajax requests. However, it automatically handles them for you!

To make this function properly, follow these steps:

1) Log in through the ajax request that will return cookies:

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

2) Enable

xhrFields: { withCredentials: true }

in subsequent ajax requests to utilize the credentials stored by the browser

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

Even though these cookies are not visible in the headers or document.cookie, the browser manages them on your behalf.

Check out my response here: How to get a cookie from an AJAX response?

Retrieve and save the cookie provided in the Set-Cookie header of an AJAX POST reply

Answer №1

Answer №2

Similar questions

Sending File from React to Express Causes 404 Error

Enter the Kannada language into the HTML text box or input field

All the routes stored in the Express app's (express-promise-router) directory

Transmit information seamlessly between PHP and Dart

Efficiently updating database records without the need for page reloads using EJS

Seeking out all of the children associated with their parent using Jquery

Utilizing Ember to transmit models to Bootstrap Popovers

Troubleshooting the issue of Ajax POST not properly sending the model data to the controller in ASP.NET Core

The Ajax contact form is not submitting the necessary POST data to the PHP script

Issue with AngularJS script halting when reaching factory function that returns a promise

Include a new route in the Vue.js router dynamically during runtime

Tips for implementing an onClick event within a NavBar component in a React application

Struggling to implement a Rock Paper Scissors game using HTML, CSS Bootstrap4, and JavaScript, specifically facing challenges in getting the function to select a new image

What is the best way to store JSON data in Mongoose database?

Is the connection and callback order incorrect in Node.js and MQTT?

Locating the specific row associated with a cell using jQuery

Troubleshooting: HighCharts xAxis not displaying dates correctly when using JSON data

Why is it that my WebMethod consistently produces JSON responses?

Leveraging jQuery for Crafting a Quiz with True or False Questions

Navigating through hashed URLs with a Flexslider component