How to set cookie value with AJAX request?

When setting cookie values via AJAX requests, the common approach is to set the cookie on the server side and send it back to the client via HTTP response headers. AJAX itself does not directly set cookies; however, it can trigger server-side operations to indirectly achieve cookie setting. Below are specific steps and examples:

Step 1: Create Server-Side Logic

First, you need to create an API endpoint on the server side that sets a cookie upon receiving a specific AJAX request. This can be implemented using various server-side languages, such as Node.js with the Express framework:

javascript
const express = require('express');
const app = express();

app.get('/set-cookie', (req, res) => {
    // Set a cookie named "userToken" with value "123456abc"
    res.cookie('userToken', '123456abc', { httpOnly: true, maxAge: 900000 });
    res.send('Cookie is set');
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

Step 2: Write the AJAX Request

On the client side, you can use JavaScript's XMLHttpRequest or the more modern fetch API to initiate AJAX requests. Here is an example using the fetch API:

javascript
function setCookieUsingAJAX() {
    fetch('http://localhost:3000/set-cookie')
    .then(response => response.text())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
}

setCookieUsingAJAX(); // Call the function to initiate the request

Step 3: Verify the Cookie

In the browser, you can check if the cookie has been set using developer tools. Typically, you can view all cookie values under the "Application" tab in the "Cookies" section.

Note:

• Ensure that cross-origin resource sharing (CORS) is properly handled when making AJAX requests, which may require setting appropriate CORS policies on the server side.
• Using the httpOnly attribute for cookies enhances security by preventing client-side scripts from accessing the cookie.
• When setting cookies, consider cookie attributes such as expiration time (maxAge), path (path), and domain (domain), which can be defined in the res.cookie function.

By following these steps and examples, you can trigger server-side cookie setting behavior using AJAX requests from the client side.