Axios请求中Http-only Cookies未自动携带的问题及解决办法

问题场景 #

我们采用Http-only Cookies存储令牌的认证方案，登录后服务端通过响应头Set-Cookie返回了access token和CSRF_COOKIE。按预期这些Cookie应自动携带到后续同域名的所有请求中，但调用/v2/accounts/ping/接口时返回401错误，请求头中未携带任何Cookie信息。

初步尝试（无效） #

查阅资料后，给Axios请求添加了withCredentials: true配置，确保请求时携带凭证，代码如下：

checkPing = async () => {
    try{
        const {data} = await axiosApi('/v2/accounts/ping/', {method: 'post', withCredentials: true});
        console.log('response', data)

    }catch (error) {
        console.log('here is error', error)
    }
}

但问题仍未解决，Cookie依旧没有被自动携带。

最终修复方案 #

经排查，问题根源在于Cookie的SameSite属性设置：

• 将Cookie的SameSite值从Lax修改为None
• 同时必须设置Secure=true（SameSite=None要求Cookie必须通过HTTPS传输）

修改后，Cookie成功自动携带到后续请求的请求头中，401错误消失。

内容的提问来源于stack exchange，提问作者emmarrat