Axios GET请求在Postman中正常，但通过Redux调用时返回400错误

问题原因排查与解决 #

这个问题的核心是Postman请求正常、后端接口逻辑无问题，说明React端发出的请求缺少后端要求的必要参数/请求头，90%以上的场景是请求未携带登录后下发的JWT令牌导致的，你可以按下面的步骤逐一排查修复：

1. 配置axios全局请求拦截器自动携带JWT #

你Postman测试时应该是手动把JWT添加到了Authorization请求头中，但当前代码中的axios请求没有自动携带token的逻辑，你可以在项目入口文件（如src/index.js）或者单独的axios配置文件中添加以下代码：

import axios from 'axios';

// 全局请求拦截器：发请求前自动注入JWT
axios.interceptors.request.use(
  (config) => {
    // 从本地存储取token，如果你存在redux的auth模块中就对应从redux取值
    const token = localStorage.getItem('token');
    if (token) {
      // 格式和你Postman中配置的保持一致，大部分后端默认要求Bearer前缀
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

2. 异常场景排查 #

如果配置拦截器后还是报错，可以按下面的顺序检查：

• 打开浏览器控制台「网络」标签，对比React发出的/api/profile/me请求头，和Postman的请求头是否有差异，重点检查Authorization、Content-Type字段是否和Postman配置一致
• 检查登录逻辑中JWT的存储是否正确，在控制台执行localStorage.getItem('token')看输出的token是否和你Postman中使用的一致
• 如果是前后端分离部署，确认后端已经配置CORS允许跨域，且如果你是把JWT存在Cookie中，需要给axios全局配置axios.defaults.withCredentials = true

3. 代码优化建议 #

你当前Dashboard组件的useEffect缺少依赖项，建议补充dispatch避免潜在的更新问题：

useEffect(() => {
  dispatch(getCurrentProfile());
}, [dispatch]);

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