React中/product路由Axios请求返回200但.then/.catch未触发

1. 检查Axios响应解析错误（最常见原因） #

• Axios默认自动解析JSON格式响应，若API返回200但内容不是合法JSON（比如空白字符串、HTML片段、格式错误的JSON），会直接进入catch分支而非then。
• 排查步骤：在AuthenticationRequired组件的请求代码中添加详细错误日志：

axios.get('/api/check-auth', { withCredentials: true })
  .then(res => {
    // 正常认证逻辑
  })
  .catch(error => {
    console.error('鉴权请求错误详情:', error);
    console.error('响应内容:', error.response?.data);
    console.error('响应头:', error.response?.headers);
    // 原重定向逻辑
  });

• 重点查看error.message是否包含JSON.parse相关提示，或error.response.data是否为非JSON格式。

2. 验证Cookie的路径与作用域 #

• 虽然API返回200，但可能鉴权Cookie未被正确携带到/product路径的请求中（比如登录时API设置的CookiePath为/以外的值，如/home），导致API实际返回"未认证"的200响应（比如返回{ authenticated: false }），被误判为需要重定向。
• 排查步骤：
  • 在浏览器开发者工具「Application」面板，查看Cookie的Path属性，确认是否覆盖/product路径。
  • 查看API返回的200响应内容，确认authenticated（或你用来判断认证状态的字段）是否为false。

3. 检查路由组件的渲染逻辑差异 #

• 确认AuthenticationRequired组件是否对不同路由做了差异化处理：
  • 比如组件内是否通过useLocation()获取当前路径，在/product路径下有错误的判断逻辑（比如误将其判定为未认证）。
  • 检查useEffect的依赖项是否包含location.pathname，导致/product路径下组件重新渲染时，请求被中断或重复执行。

4. 排查响应头与CORS配置 #

• 即使状态码为200，以下响应头问题也会导致Axios触发错误：
  • Access-Control-Allow-Credentials未设为true：浏览器会阻止Axios读取响应内容，直接进入catch。
  • Content-Type与实际响应内容不匹配：比如API返回JSON但Content-Type设为text/plain，Axios解析失败。
• 排查步骤：在浏览器网络面板的「Response Headers」中检查这两个字段。

5. 检查组件卸载或请求中断情况 #

• 在/product路径下，是否存在组件快速卸载的场景？比如路由切换时，AuthenticationRequired组件在请求完成前被卸载，Axios会取消请求并触发catch。
• 排查步骤：在组件的useEffect中添加清理函数，确认请求是否被中断：

useEffect(() => {
  const source = axios.CancelToken.source();
  axios.get('/api/check-auth', { 
    withCredentials: true,
    cancelToken: source.token
  })
  .then(res => { /* ... */ })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('鉴权请求被取消:', error.message);
    } else {
      // 其他错误处理
    }
  });

  return () => {
    console.log('AuthenticationRequired组件卸载，取消请求');
    source.cancel('组件卸载');
  };
}, [location.pathname]);

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