React登录组件Axios请求异常：正确凭证返回错误响应

核心矛盾：正确登录凭证时返回首页GET的响应（无user对象），错误凭证返回预期结果；Postman测试正常，但React代码和Replit环境均出现异常。问题大概率出在前端请求配置或服务器对请求的判断逻辑上，以下是具体排查方向：

1. 验证请求地址是否完全正确 #

先确认baseURI拼接后的完整请求地址，和Postman中使用的地址完全一致。比如Postman用的是http://xxx.com/api/login，但前端baseURI少了/api，会导致服务器把/login识别成首页路由，直接返回首页内容。

直接打印完整请求地址对比：

console.log(`${baseURI}/login`); // 和Postman的请求地址做对比

2. 关闭Axios自动重定向，排查是否被跳转 #

你收到的是首页内容，大概率是服务器把登录POST请求重定向到了首页GET接口。Axios默认会自动跟随重定向，导致返回重定向后的响应。可以关闭重定向验证：

const res = await axios.post(`${baseURI}/login`, {
  email: email,
  password: password
}, {
  headers: {
    "Content-type": "application/json",         
  },
  maxRedirects: 0 // 关闭自动重定向
});

如果此时收到3xx状态码，说明确实被重定向了，需要排查服务器端重定向的触发逻辑。

3. 对齐Postman的请求头 #

Postman会自动添加一些请求头，而Axios的默认头可能不全，导致服务器返回非预期内容。把Postman里的请求头完全复制到Axios中，尤其要加Accept: application/json确保返回JSON格式：

const res = await axios.post(`${baseURI}/login`, {
  email: email,
  password: password
}, {
  headers: {
    "Content-type": "application/json",
    "Accept": "application/json",
    // 复制Postman里的其他头，比如User-Agent等
  }
});

4. 检查全局Axios拦截器 #

如果项目里配置了全局Axios拦截器，可能不小心修改了请求或响应。比如拦截器错误替换了登录请求的响应数据：

// 检查全局配置中是否有类似代码
axios.interceptors.response.use(
  response => {
    // 确认没有修改response.data的异常逻辑
    return response;
  },
  error => {
    return Promise.reject(error);
  }
);

5. 排查Vite代理配置 #

如果用了Vite跨域代理，代理规则错误会导致请求被转发到首页。检查vite.config.js的代理配置：

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://your-server.com',
        changeOrigin: true,
        // 确认rewrite规则没有把/login重写成/
        // rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});

6. 打印完整响应调试 #

在handleLogin中打印完整响应对象，查看状态码、响应头、请求源等细节：

console.log(res); // 不要只打印res.data，看完整的响应信息

重点看响应的status是否为200，Content-Type是否为application/json，这些能帮你快速定位问题。

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