本文详解 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 和 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]); // 确保依赖完整? 总结
- 不是 React 的 bug，而是浏览器安全机制（CORS）或请求库配置引发的表象；
- 优先通过 Network 面板确认是否存在
OPTIONS请求； - 排查 Axios 拦截器、重复初始化实例、或第三方库（如
axios-hooks）的干扰； - 生产环境建议后端统一处理预检（返回
Access-Control-Allow-*头），前端无需额外处理； - 使用
AbortController或isMounted标志提升异步请求安全性。
通过以上步骤，95% 的“双请求”问题可被准确定位并解决，确保前后端通信高效可靠。
