Set-Cookie header not being passed with Azure Functions

Question

I am trying to write an Azure Function which will set a HttpOnly cookie in the user's browser but it is not working. In Postman I can see the Set-Cookie header in the response, but this header is omitted when testing the function in the browser.

Here are the Headers returned to the browser: headers: {content-length: "13", content-type: "text/html; charset=utf-8"}

Here is my code:

Azure Function Code

module.exports = function (context, req) {
  context.log('JavaScript HTTP trigger function processed a request.');

  context.res = {
    status: 200,
    headers: {
      "Content-Type": "text/html",
      "Set-Cookie": "a=b; httpOnly",
    },
    
    body:
      'Body Response'
  };
  context.done();
}

Node Code

const createCookieAzure = () => {
  return new Promise((resolve, reject) => {

    console.log("Inside create cookie promise");

    axios({
      url: 'http://localhost:7071/api/SetHttpOnlyCookie',
      method: 'GET',
    })
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  })
}

const createHttpOnlyCookie = async (e) => {
  e.preventDefault();
  console.log("Button clicked");
  await createCookieAzure();
  console.log("After createcookie");
}

In the above code createHttpOnlyCookie() is triggered by the onClick of a button component.

Hury Shen · Answer 1 · 2020-07-30T07:48:54.877

For this problem, I think you need to check if the cookie created in your browser first. You can go to your browser "Settings" --> search "cookie" --> "Cookies and site data" --> "See all cookies and site data" --> then search your cookie.

I guess when you request the function by axios, it will not add the cookie to your browser because set cookie in a api and request it in axios is not same as request by browser (if the cookie has been added in browser, everything is ok, please ignore the rest). If you don't find the cookie in your browser, I think you need to add another header in your axios request like below code:

axios({
  method: 'get',
  url: '....',
  headers: {'header1': value}
})

Thank you for your response Hury. The cookie is not there. However, the cookie does show in the Network tab, but not the application tab (of chrome dev tools). Can you elaborate on what type of header should be added to the axios request code? — L. O'Shea, Aug 03 '20 at 22:59

Set-Cookie header not being passed with Azure Functions

1 Answers1