React中useEffect([])调用Axios接口报CORS错误，按钮调用正常？

这种情况通常和浏览器请求触发时机、请求上下文，以及服务器的CORS策略细节有关，常见的几个原因：

• 预检请求处理差异：页面初始化时（useEffect空依赖触发）的请求，浏览器发送的OPTIONS预检请求可能因为请求头、凭证携带情况和用户交互触发的请求不同，导致服务器的CORS拦截规则触发。比如初始请求没带上服务器要求的Cookie，而按钮点击时的请求因为是用户交互，浏览器自动带上了Cookie，服务器凭证校验通过。
• 开发环境代理失效：如果你的React项目用了开发代理（比如create-react-app的proxy配置），组件挂载时的请求可能在代理规则生效前就发送了，直接触发了浏览器的CORS检查；而按钮点击时代理已经正常工作，请求通过代理转发避免了跨域问题。
• 服务器CORS策略的特殊限制：部分服务器会对非用户主动触发的请求（比如页面加载时的自动请求）做额外限制，比如拦截没有用户交互标识的请求，或者对OPTIONS请求的响应配置不完整。

针对这些可能的原因，你可以逐一排查：

1. 配置axios携带凭证
   如果服务器要求请求携带Cookie等凭证，需要给axios设置withCredentials: true，可以全局配置或者在单个请求里设置：

   // 全局配置
   axios.defaults.withCredentials = true;
   
   // 或者单个请求配置
   function getData(){
     axios.post('/cors_enabled_api_URL', body, { withCredentials: true })
       .then(res=>console.log(res))
       .catch(err=>console.log(err));
   }
   

2. 检查服务器CORS配置
   确认服务器的CORS配置允许以下内容：
   • 你的前端Origin（比如http://localhost:3000）
   • POST方法以及OPTIONS预检方法
   • 允许携带自定义请求头（如果你的请求有）
   • 允许凭证（如果需要的话，配置Access-Control-Allow-Credentials: true）
3. 确保开发代理正常工作
   如果用create-react-app，检查package.json里的proxy字段是否正确指向后端地址，或者改用setupProxy.js进行更灵活的代理配置，确保所有请求都能通过代理转发，避免直接触发跨域。
4. 调整请求触发时机（临时方案）
   如果暂时找不到根本原因，可以用requestIdleCallback或者短延迟的setTimeout让请求在页面初始化完成后再发送，避免时机问题：

   useEffect(()=>{           
     requestIdleCallback(getData);
     // 或者 setTimeout(getData, 100);
   },[])
   

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