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

k0pti3hp  于 2023-03-02  发布在  iOS
关注(0)|答案(3)|浏览(323)
    • 说明**

在这里,我使用Axios向www.example.com发送了一个get请求,然后向ABC.com/Users/Login发送了一个post请求,其中包含表单数据和Cookie。ABC.com/Users/Login using Axios after this I sent a post request to ABC.com/Users/Login with form data and Cookie.
但它不能正常工作。它在 Postman 身上正常工作

    • 我的代码**
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

它在 Postman 中工作,但在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;
}
yhuiod9q

yhuiod9q1#

如果使用 axios,请将withCredentials设置为true。

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

然后在您的 * 节点 * 中,在cors中间件中,设置

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

qco9c6ql2#

如果您希望在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)
0kjbasz6

0kjbasz63#

要在Axios中使用Cookie,您始终需要设置withCredentials属性。
不仅当您想要发送cookie时,而且在接收cookie时,此凭据需要设置为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)

相关问题