在Nuxt 3应用中获取并设置JWT Token的问题求助

核心问题：Token获取路径错误 #

后端将JWT Token放在响应的Cookie头中返回，而非响应体（response.data）内，因此你通过response.data.cookie无法获取到值，返回undefined是必然结果。

正确获取Cookie中的Token #

1. 后端配置跨域头（必做） #

跨域场景下，浏览器默认限制前端访问Set-Cookie响应头，需让后端添加Access-Control-Expose-Headers: Set-Cookie响应头，否则前端无法读取Cookie相关头信息。

2. 前端修改代码提取Token #

axios不会自动解析Cookie，需手动从响应头中提取：

let response = await axios.post('http://localhost:4000/api/client/login', {
    email: this.login.email,
    password: this.login.password
})

// 取出响应头中的Set-Cookie字段
const setCookie = response.headers['set-cookie'];
if (setCookie) {
    // 定位到Token对应的Cookie项（假设Cookie键名为token，需根据实际情况调整）
    const tokenItem = setCookie.find(item => item.startsWith('token='));
    if (tokenItem) {
        // 截取出纯Token值，去除后续的Cookie属性（如expires、path等）
        const token = tokenItem.split(';')[0].split('=')[1];
        if (process.client) {
            window.localStorage.setItem('token', token);
        }
    }
}

Nuxt3中localStorage的注意事项 #

你提到的Nuxt3默认不允许使用localStorage，本质是SSR模式下服务端不存在window对象。你的代码已通过process.client判断确保仅在客户端执行，这部分逻辑是正确的，无需修改。

更简洁的替代方案：调整后端返回格式 #

如果可以修改后端代码，建议直接将Token放在响应体中返回，例如：

{
  "token": "your-jwt-token-string"
}

此时前端代码可简化为：

let response = await axios.post('http://localhost:4000/api/client/login', {
    email: this.login.email,
    password: this.login.password
})

const token = response.data.token;
if (process.client) {
    window.localStorage.setItem('token', token);
}

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