React 中双倍 API 请求问题的排查与解决方案-js教程-PHP中文网

React 中双倍 API 请求问题的排查与解决方案

本文详解 react 组件中看似单次触发的 useeffect 却导致服务端收到两次请求的常见原因，重点分析 cors 预检、axios 全局配置及调试方法，并提供可验证的修复示例。

本文详解 react 组件中看似单次触发的 useeffect 却导致服务端收到两次请求的常见原因，重点分析 cors 预检、axios 全局配置及调试方法，并提供可验证的修复示例。

在 React 应用中，你观察到 useEffect 仅执行一次（控制台仅打印一次 'Enter in the useEffect'），但后端日志或网络面板却显示同一 API 被调用了两次——这并非 React 或 useEffect 本身重复渲染所致，而通常源于浏览器或请求库层面的隐式行为。以下是关键原因与系统性排查步骤：

? 1. 首要怀疑：CORS 预检请求（Preflight）

当你的前端（如 http://localhost:3000）与后端 API（如 https://api.example.com）跨域时，浏览器会自动对非简单请求（含自定义 header 如 Authorization: Bearer xxx、Content-Type: application/json 等）发起 OPTIONS 预检请求。该请求不经过 React 逻辑，完全由浏览器拦截并发送，因此：

console.log 不会记录它；
后端日志中会看到两次请求：一次 OPTIONS，一次真实的 GET /users；
在 Chrome DevTools 的 Network → Filter → XHR/Fetch 中，你能清晰看到两个条目：一个 OPTIONS（Status 204），一个 GET（Status 200）。

✅ 验证方式：
在后端日志中检查请求 method 是否包含 OPTIONS；或在 Network 面板中点击任一请求 → 查看 Headers → Request Method。

⚙️ 2. 检查 Axios 全局副作用

Axios 的 interceptors 或全局默认配置可能意外触发重复请求。例如：

// ❌ 危险示例：响应拦截器中未处理错误，导致重试逻辑失控
axios.interceptors.response.use(
  res => res,
  error => {
    if (error.config && !error.config._retry) {
      error.config._retry = true;
      return axios.request(error.config); // 无条件重发 → 双倍请求！
    }
    throw error;
  }
);

✅ 排查建议：

React 组件生成器

根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。

下载

临时注释所有 axios.interceptors.*；
改用原生 fetch 替换测试，确认是否仍复现：

useEffect(() => {
  if (!isSessionActive) return;
  const token = window.localStorage.getItem('token');
  fetch(`${URL}/users`, {
    headers: { Authorization: `Bearer ${token}` }
  })
    .then(res => res.json())
    .then(data => setProfileData(data))
    .catch(console.error);
}, [isSessionActive]);

若 fetch 版本仅触发一次，则问题必在 Axios 配置层。

✅ 3. 最佳实践：避免重复请求的健壮写法

即使排除了上述原因，也建议增强请求逻辑的防御性：

useEffect(() => {
  if (!isSessionActive) return;

  let isMounted = true; // 防止组件卸载后状态更新
  const token = window.localStorage.getItem('token');

  const fetchData = async () => {
    try {
      const res = await axios.get(`${URL}/users`, {
        headers: { Authorization: `Bearer ${token}` },
        // 显式禁用缓存（开发期可选）
        params: { t: Date.now() } // 或设置 headers: { 'Cache-Control': 'no-cache' }
      });
      if (isMounted) setProfileData(res.data);
    } catch (err) {
      console.error('Failed to fetch profile:', err);
    }
  };

  fetchData();
  return () => { isMounted = false };
}, [isSessionActive, URL]); // 确保依赖完整