Set-Cookie header 未通過 Azure 函數傳遞

Question

我正在嘗試編寫一個 Azure Function 它將在用戶的瀏覽器中設置一個 HttpOnly cookie，但它不起作用。 在Postman中可以看到響應中的Set-Cookie header，但是在瀏覽器中測試function時省略了這個header。

以下是返回給瀏覽器的標頭： headers: {content-length: "13", content-type: "text/html; charset=utf-8"}

這是我的代碼：

Azure Function 代碼

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();
}

節點代碼

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");
}

在上面的代碼中，createHttpOnlyCookie() 是由按鈕組件的 onClick 觸發的。

Answer 1

對於這個問題，我認為你需要先檢查瀏覽器中是否創建了cookie。 您可以go到您的瀏覽器“設置”-->搜索“cookie”-->“Cookies和站點數據”-->“查看所有cookies和站點數據”-->然后搜索你的cookie。

我想當你通過 axios 請求 function 時，它不會將 cookie 添加到你的瀏覽器，因為在 api 中設置 cookie 並在 axios 中請求它與瀏覽器請求不同（如果瀏覽器中已添加 cookie，則一切正常，請忽略其余部分）。 如果您在瀏覽器中找不到 cookie，我認為您需要在axios請求中添加另一個 header，如下代碼所示：

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