noobadoobacoder
noobadoobacoder

Reputation: 11

Unable to Set Cookies from Express.js Backend to SvelteKit Frontend on Azure App Service

I am developing an application using SvelteKit for the frontend and Express.js for the backend. During local development, I could successfully set cookies from the backend to the frontend using res.cookie(). However, after deploying the application to Azure App Service, I am facing issues with setting cookies from the backend to the frontend.

Here are the details of my setup:

Backend server: abcbackend.azurewebsites.net Frontend server: abcfrontend.azurewebsites.net

When I make requests to the backend server from the frontend server, I expect the backend to set cookies so that they can be accessed by the frontend. However, the cookies are not being set or recognized by the frontend in the browser.

I would greatly appreciate any insights or suggestions on how to resolve this issue and successfully set cookies from the Express.js backend to the SvelteKit frontend when hosting the application on Azure App Service.

I have already tried the following steps without success:

Ensured that CORS is correctly configured on the backend server to allow access from the frontend domain. Set the SameSite attribute to "None" and Secure attribute to true in the res.cookie() options. Verified the Azure App Service configurations and made sure that both the frontend and backend are running on the appropriate platforms (Windows or Linux) and have the necessary modules or extensions installed. Enabled HTTPS for both the frontend and backend App Services. Inspected network requests and responses in the browser's developer tools for any issues or discrepancies in headers or cookie settings. Used the domain option inside res.cookie() into domain=".azurewebsites.net" still not working. I receive the cookie on postman but cant find it in browser.

Despite these efforts, I am still unable to set cookies from the backend server that can be accessed by the frontend in the browser.

Upvotes: 1

Views: 598

Answers (1)

Sampath
Sampath

Reputation: 3533

I have Referenced this MSDOC cookie. and Node.js web app in Azure

  1. Make sure that the cookie domain is set correctly. If you are using a custom domain, you should set the domain attribute of the cookie to your custom domain. For example, if your custom domain is example.com, you should set the domain attribute to .example.com (note the leading dot).

  2. Try setting the SameSite attribute to None and the Secure attribute to true in the res.cookie() options. This is required for cookies to be set across different domains over HTTPS.

  3. Check if the cookies are being set correctly on the backend by logging the Set-Cookie header in the response. You can do this by adding the following code to your backend:

app.use((req, res, next) => {
  res.on('header', () => {
    console.log(res.getHeaders()['set-cookie']);
  });
  next();
});

This will log the Set-Cookie header in the response to the console.

  1. Check if the cookies are being sent correctly on the frontend by logging the Cookie header in the request. You can do this by adding the following code to your frontend:
   fetch('/api/test')
     .then((res) => {
       console.log(res.headers.get('cookie'));
       return res.json();
     })
     .then((data) => {
       console.log(data);
     });

This will log the Cookie header in the request to the console.

  1. If you are still unable to set cookies, you can try using a third-party library like cookie-parser to set and parse cookies. Here's an example of how to use cookie-parser:
const express = require('express');
const cookieParser = require('cookie-parser');
const app = express();

app.use(cookieParser());

app.get('/api/test', (req, res) => {
  res.cookie('test', '123', {
    domain: '.example.com',
    sameSite: 'none',
    secure: true,
  });
  res.send({ message: 'Cookie set successfully' });
});

enter image description here

enter image description here

This will set a cookie named test with the value 123 and the correct attributes.

For more information on how to set cookies in Express.js, you can refer to the following document: document1

Upvotes: 0

Related Questions