前端无法获取浏览器中已设置的AccessToken Cookie问题求助

核心原因 #

你遇到的问题是**httpOnly: true**导致的——这个属性的设计目的就是禁止前端JavaScript访问Cookie，以此防范XSS攻击窃取敏感的AccessToken。所以不管是用document.cookie还是任何前端Cookie库，都无法读取到这个Cookie，这是正常的安全机制，不是代码bug。

解决方案 #

你的需求是“AccessToken未过期时自动登录”，不需要直接读取Cookie，而是通过后端接口的响应状态来判断登录状态：

1. 确保Axios请求自动携带Cookie #

首先要给Axios请求开启withCredentials: true，否则浏览器不会自动把httpOnly的Cookie发送给后端，接口会返回未授权：

export const getMe = createAsyncThunk(
    'auth/getMe',
    async () => {
        try {
            const { data } = await axios.get(`/users/user`, {
                withCredentials: true // 关键配置：让请求自动携带Cookie
            })
            return data
        } catch (error) {
            // 接口返回401/403时，说明Token无效或过期，这里处理登录跳转逻辑
            console.log(error)
            throw error // 抛出错误让Thunk进入rejected状态，方便后续处理
        }
    }
)

2. 用接口响应判断登录状态 #

• 如果/users/user接口返回成功（200状态码），说明AccessToken有效，用户已登录，直接使用返回的用户信息即可。
• 如果接口返回401/403，说明AccessToken过期或不存在，引导用户到登录页。

额外注意点 #

• secure: true表示Cookie仅在HTTPS环境下生效，如果本地开发用HTTP协议，这个Cookie不会被浏览器保存。本地测试可以临时把secure设为false，上线后再改回true。
• 不要为了前端能读取Cookie而关闭httpOnly: true，这会引入XSS攻击风险，违背了安全设计的初衷。

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