VueJS项目JWT认证问题：Postman正常，Axios请求失败

问题回顾 #

使用Postman向https://xyz.blabla/api/authenticate发送POST请求（请求体为{"username": "admin", "password": "admin", "rememberMe": true}）可正常获取Token，但Vue项目中用Axios发送相同请求时无法拿到Token。

排查与解决步骤 #

1. 核对请求数据与实际发送内容 #

• 先确认console.log(data)的输出是否和Postman的请求体完全一致：检查login.value、password.value是否正确获取了输入框的值，有没有空字符串或拼写错误（模板中v-model绑定的是login，代码中映射为username，要确保输入的用户名确实传到了username字段）。
• 打开浏览器控制台的Network标签，查看实际发送的请求：
  • 对比请求URL是否正确，有没有被Axios全局配置的baseURL修改；
  • 查看Request Payload是否和Postman的请求体一致，确认rememberMe的布尔值是否正确传递（避免被转为字符串）。

2. 检查CORS响应头配置 #

Postman不受浏览器CORS规则限制，但前端会受限制。如果后端没有配置Access-Control-Expose-Headers字段，浏览器会阻止前端读取Authorization这类非默认响应头：

• 在浏览器Network标签的响应头中，查看是否存在Access-Control-Expose-Headers: Authorization；
• 如果没有，需要后端添加该配置，允许前端读取Authorization头。

3. 调整Axios响应头的读取方式 #

浏览器会自动将响应头字段转为小写，所以尝试用小写键读取：

const bearerToken = result.headers['authorization'];

或者同时兼容大小写：

const bearerToken = result.headers.authorization || result.headers.Authorization;

4. 查看完整错误信息 #

在catch块中打印更详细的错误内容，明确后端返回的状态码和错误信息：

catch (_error) {
  console.error('Login failed! Status:', _error.response?.status);
  console.error('Error Data:', _error.response?.data);
  console.error('Response Headers:', _error.response?.headers);
  authenticationError.value = true;
}

比如如果返回401，可能是请求数据有误；如果返回500，可能是后端处理逻辑问题，这些信息能快速定位原因。

5. 检查Axios的全局配置 #

确认项目中有没有全局修改Axios的配置，比如：

• 是否设置了transformRequest修改了请求体格式；
• 是否添加了额外的请求头，导致后端验证不通过；
• 是否开启了withCredentials，但后端未配置对应的CORS凭证允许。

内容的提问来源于stack exchange，提问作者Nima M.