React中Axios请求显示Pending问题排查及最优实现方案

一、当前代码的核心问题 #

1. 未引入CORS依赖：server.js中调用了app.use(cors())但未导入cors模块，运行时会抛出错误，导致代理服务无法正常工作。
2. 路由函数未处理响应：getAllNodes作为Express路由处理函数，没有接收req和res参数，也未将Axios获取的数据返回给前端。Express要求必须主动结束请求响应（如res.json()），否则请求会一直处于pending状态。
3. 未启动代理服务器：原代码遗漏了app.listen()，代理服务根本没有启动，前端请求无法被接收。

二、修正后的代理服务器代码 #

const express = require("express");
const axios = require("axios");
// 1. 引入cors模块
const cors = require("cors");
const app = express();
const port = 3000;

// 2. 初始化CORS中间件
app.use(cors());

const instance = axios.create({
  baseURL: "https://api.data.io/api/v1",
  headers: {
    "x-id-apix": "xxxxxx",
  },
});

// 3. 完善路由处理函数：接收req/res，处理响应与错误
const getAllNodes = async (req, res) => {
  try {
    console.log("yay!");
    const response = await instance.get("/nodes");
    // 将目标接口返回的数据转发给前端
    res.json(response.data);
  } catch (error) {
    // 捕获并返回错误信息，避免请求挂起
    res.status(error.response?.status || 500).json({ 
      error: error.message || "请求失败" 
    });
  }
};

app.get("/nodes", getAllNodes);

// 4. 启动代理服务器
app.listen(port, () => {
  console.log(`Proxy server running on http://localhost:${port}`);
});

三、更优的实现方式 #

1. React官方内置代理（开发环境首选） #

无需单独搭建Express服务器，直接在React项目的package.json中添加proxy字段，React会自动代理请求并解决CORS问题：

{
  "name": "your-react-app",
  "proxy": "https://api.data.io/api/v1"
}

前端请求代码简化为：

const newinstance = axios.create({
  baseURL: '/' // 使用相对路径
});

export const getNodes = () => {
  return newinstance.get('/nodes', {
    headers: { "x-id-apix": "xxxxxx" } // 自定义请求头放在这里
  });
};

注意：该方案仅适用于开发环境，生产环境需搭配反向代理。

2. http-proxy-middleware（复杂代理场景） #

如果需要多API源、路径重写等复杂规则，使用这个包更灵活：

1. 安装依赖：npm install http-proxy-middleware --save-dev
2. 在React项目src目录创建setupProxy.js：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/nodes',
    createProxyMiddleware({
      target: 'https://api.data.io/api/v1',
      changeOrigin: true,
      headers: {
        "x-id-apix": "xxxxxx"
      }
    })
  );
};

前端请求无需修改，直接用相对路径即可。

3. 生产环境代理方案 #

生产环境建议用Nginx做反向代理，配置示例：

server {
  listen 80;
  server_name your-domain.com;

  location /api {
    proxy_pass https://api.data.io/api/v1;
    proxy_set_header x-id-apix "xxxxxx";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

前端请求指向/api/nodes，由Nginx转发到目标接口，同时解决CORS问题。

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