API请求遇CORS错误及504网关超时问题求助

针对你遇到的API调用异常问题，逐个给出可行的解决办法：

1. CORS策略拦截错误 #

• 后端配置修复：要求后端团队在https://staging.backend.devasmriti.com的API响应头中添加Access-Control-Allow-Origin: http://localhost:3000；开发环境可临时设为*（生产环境禁止使用，存在安全风险）。
• 前端本地代理绕过：如果后端暂时无法调整，在前端项目（以React为例）中创建src/setupProxy.js文件，配置代理转发：

  const { createProxyMiddleware } = require('http-proxy-middleware');
  module.exports = function(app) {
    app.use(
      '/api/events',
      createProxyMiddleware({
        target: 'https://staging.backend.devasmriti.com',
        changeOrigin: true,
      })
    );
  };
  

  配置后前端请求改为/api/events，避免浏览器触发CORS校验。

2. Axios网络错误 #

这个错误大多是CORS问题或后端服务不稳定的连锁反应，优先解决前序问题后再验证。额外可做以下调整：

• 给Axios添加超时限制，避免请求无限等待：

  axios.get('/api/events', { timeout: 10000 }) // 设置10秒超时
  

• 检查本地网络环境，关闭可能干扰请求的代理、VPN工具。

3. 504网关超时错误 #

这是后端网关层面的问题，说明目标服务（https://staging.backend.com）响应缓慢或服务不稳定：

• 联系后端团队排查该环境的服务器负载、数据库查询效率、API接口逻辑，定位超时根源；
• 前端可添加重试机制，降低偶发超时的影响（示例Axios拦截器）：

  axios.interceptors.response.use(
    response => response,
    error => {
      const config = error.config;
      // 针对网络错误或504超时重试最多3次
      if ((error.code === 'ERR_NETWORK' || error.response?.status === 504) && (!config.__retryCount || config.__retryCount < 3)) {
        config.__retryCount = (config.__retryCount || 0) + 1;
        return new Promise(resolve => setTimeout(() => resolve(axios(config)), 1000));
      }
      return Promise.reject(error);
    }
  );
  

额外注意 #

你提到的两个API地址https://staging.backend.devasmriti.com/api/events和https://staging.backend.com/api/events存在差异，确认是否为笔误，统一请求地址可避免不必要的问题。

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