解释
在这里,我使用Axios向ABC.com/Users/Login发送了一个get-req。之后,我向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;
}
如果您想在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)
如果使用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",
})
);
要在Axios中使用Cookie,您始终需要设置withCredentials属性。
不仅当您想要发送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)