React前端Axios Post请求未完成问题求助

核心问题 #

你的Node.js后端虽然成功获取了第三方API的数据，但没有向前端返回任何响应，导致前端的Axios请求一直处于pending状态，永远无法进入try或catch分支。

后端代码修复 #

错误根源 #

后端/auth/token接口中，调用第三方API的.then链仅打印日志，未使用Express的res对象发送响应；catch块也只是打印错误，没有把错误信息返回给前端。

修复后的后端代码 #

import axios from "axios";
import express from "express";
import cors from "cors"; // 需执行npm install cors安装依赖，解决跨域问题

const app = express();
const port = 3004;

// 启用CORS，允许前端跨域请求
app.use(cors());

axios.defaults.baseURL = 'third-party API url';
axios.defaults.headers.post['accept'] = 'application/json';
axios.defaults.headers.post['Content-Type'] = 'application/json';

const instancePost = axios.create({});

app.post('/auth/token', async (req, res) => {
  try {
    // 调用第三方API
    const response = await instancePost.post('auth/token', {
      username: 'username',
      password: 'password',
      ttl: '0'
    });
    // 将第三方API的数据返回给前端
    res.json(response.data);
    console.log('Success!');
  } catch (error) {
    console.error('请求第三方API出错:', error);
    // 返回错误信息给前端，设置对应状态码
    res.status(error.response?.status || 500).json({
      message: '获取令牌失败',
      error: error.response?.data || error.message
    });
  }
})

app.listen(port, () => console.log(`服务运行在端口 ${port}!`));

修改说明 #

1. 添加CORS中间件：React前端和Node后端端口不同，必须启用CORS才能正常跨域请求。
2. 用async/await简化异步逻辑：替代嵌套.then链，代码更易维护。
3. 返回响应给前端：
   • 成功时用res.json()把第三方API数据返回给前端。
   • 失败时用res.status().json()返回错误状态码和信息，让前端能进入catch分支处理。
4. 完善错误日志：打印具体错误信息，方便排查问题。

前端代码注意事项 #

1. 确保baseURL配置的是Node后端的正确地址（比如http://localhost:3004）。
2. 确保authAPI函数被正确调用，比如在React组件的useEffect或点击事件中执行：

// 示例：在React组件中调用
import authService from './path-to-your-auth-service';

useEffect(() => {
  const fetchToken = async () => {
    await authService.authAPI();
  };
  fetchToken();
}, []);

验证修复 #

修复后，前端Axios请求会收到后端返回的数据或错误信息，console.log(response)或console.error(error)会正常执行，Chrome网络面板中请求状态会从pending变为200（成功）或对应错误状态码。

内容的提问来源于stack exchange，提问作者João Ignácio