Set-Cookie 在 axios 调用中无法正常工作

Question

说明

在这里，我使用 Axios 向 ABC.com/Users/Login 发送了一个获取请求，之后我向 ABC.com/Users/Login 发送了一个带有表单数据和 Cookie 的发布请求。

但它不能正常工作。它在邮递员中正常工作

我的代码

axios.get('ABC.com/Users/Login')
.then(async response => {

   console.log("call login page");
   let tokenKey = "__RequestVerificationToken";
   let tokenValue = "CfDJ8DF1Ubmz1lpEibYtvvnYRTVXaJ-HWILEtqE_A3bGmDrD-yyKyJPbYK7qrcS9AIzezPo5- 
    tOWmcXs6WgYThZP-5qo1o1XXpalkJDEPnBtnVa7EhaUYbY2XNcANuugyWgkIf3-O2-_f5h7mNu960qGIaM";
   const userName="XYZ";
   const pass="test@123";

   let form=new FormData();
   form.append('UserName', userName);
   form.append('Password', pass);
   form.append([tokenKey], tokenValue);

   headers={
        'Cookie':response.headers['set-cookie'];
   }

   await axios.post('ABC.com/Users/Login', form, 
   { headers: {...form.getHeaders(),...headers}})
   .then(async response => {
        console.log(`Login success in ${userName}`);
        console.log("response",response.data);
   })
   .catch(error => {
       console.log(error);
   });

}
.catch(error => {
console.log(error);
});

在第一次 Axios 调用中，我得到：-

Set-Cookie: .AspNetCore.Antiforgery.b02ILwhXMuw=CfDJ8DF1Ubmz1lpEibYtvvnYRTXz_0rOkGhY6OXEw3d3vsDNG81V4IaMPfVZm5Hk3_icgp_ToLDG9xKu2mcM1VtEOMnSCktfZwG7Dj9_549SUiKht6Yv33pozagGjseFsfXI74wBwu-mMJkzgwfPx3jS4OA; path=/; samesite=strict; httponly
Set-Cookie: ABC.Session=CfDJ8DF1Ubmz1lpEibYtvvnYRTViv4PoRc%2F7jhjXdtCo4m1GZbcMf60xe9sOva27QUGL0BvT2A2SQZaCmrXlj%2FVL9lTvower%2B1lF87MQVTwDQKAFoEODlnPfWEM6SsrqDa0tomlRynXOtyCROBltiwNI27vo3uo4Y8jEn834lZ4OHYG3; path=/; samesite=lax; httponly 

我想像这样设置 cookie :-

Cookie: .AspNetCore.Antiforgery.b02ILwhXMuw=CfDJ8DF1Ubmz1lpEibYtvvnYRTXz_0rOkGhY6OXEw3d3vsDNG81V4IaMPfVZm5Hk3_icgp_ToLDG9xKu2mcM1VtEOMnSCktfZwG7Dj9_549SUiKht6Yv33pozagGjseFsfXI74wBwu-mMJkzgwfPx3jS4OA; ABC.Session=CfDJ8DF1Ubmz1lpEibYtvvnYRTViv4PoRc%2F7jhjXdtCo4m1GZbcMf60xe9sOva27QUGL0BvT2A2SQZaCmrXlj%2FVL9lTvower%2B1lF87MQVTwDQKAFoEODlnPfWEM6SsrqDa0tomlRynXOtyCROBltiwNI27vo3uo4Y8jEn834lZ4OHYG3

它在邮递员中有效，但在 Axios 呼叫中无效。即使我也用过这个但它不起作用

let cook1 = response.headers['set-cookie'][0].replace(" path=/; samesite=strict; httponly", "");
let cook2 = response.headers['set-cookie'][1].replace("; path=/; samesite=lax; httponly", "");
let mainCookie=cook1 + " " + cook2
// mainCookie .AspNetCore.Antiforgery.b02ILwhXMuw=CfDJ8DF1Ubmz1lpEibYtvvnYRTUh3vyphSzebPn04M1GqaH8KdFgWLSBpj5a06HBUhoYBhWdiWJw7Yy5525ZcZ_WblCjF7AzWbhQl2dFbQTwOmzP3K7oa0CLirsSJYkhIG-fHGizaNo-3cf8YdSiECkGhMM; ABC.Session=CfDJ8DF1Ubmz1lpEibYtvvnYRTVEF0LnEGw51HveT2mRMrzmgbHiPWjs8UiPcGcqUpJBhTG1uBSE5NLG8tBwkW1XcJH3OxPcPPsaB30aaRREgroCkO1jw%2BJY6tavDFE0P9RTmk9%2Bf2CTVwaTWYRQgPGam1CWJfODoyCzHwiIdfl8ciJS
headers={
        'Cookie':mainCookie;
}

Answer 1

如果您使用的是 axios，请将

withCredentials

设置为 true。

例子：

const api = axios.create({
    baseURL: "http://localhost:5000/api/v1",
    withCredentials: true,
    headers: {
        "Content-type": "application/json",
    },
});

然后在您的Node中，在cors中间件中设置

app.use(
    cors({
        credentials: true,
        origin: "http://localhost:3000",
    })
);

Answer 2

如果你想在 Axios 中使用 Cookie，你需要包含 withCredentials 属性。

axios.post('ABC.com/Users/Login', form, { withCredentials: true });

如果是我，我会创建一个新的 axios 实例并将该实例用于您的调用，以便它为您的所有 api 调用使用相同的 axios 实例。

const axiosInstance = axios.create({
   withCredentials: true
})
axiosInstance.post('ABC.com/Users/Login', form)

Answer 3

要在 Axios 中使用 Cookie，您始终需要设置 withCredentials 属性。

不仅在发送cookie的时候，在接收cookie的时候，这个credentials需要设置为

true

，这样浏览器才能存储它。

axios.post(ENDPOINT, JSON.stringify(jsonObject), 
{headers: {'Content-Type': 'application/json'}, withCredentials : true})

在服务器端，如果您的前端和后端来源不同，请确保在发送 cookie 时包含

sameSite:'none'

和

secure:true

：

res.cookie('jwt',token, {httpOnly: true, sameSite: 'none', secure: true , maxAge: 24 * 60 * 60 * 1000})
res.json(jsonObject)

Answer 4

这是我的两分钱，以防万一有人尝试了所有这些解决方案但仍然无法让 cookie 出现。

如果您的 cookie 仅为 HTTP，并且您正在使用浏览器的“应用程序/Cookie”部分查看该 cookie 是否存在，它可能出于某种原因不会显示。而是发送另一个请求并检查请求标头以查看 cookie 是否存在。

我尴尬地花了很长时间试图弄清楚为什么我的 cookie 没有被设置，结果才发现它是，但我找错了地方。