React组件中使用Axios调用Express接口获取数据失败

数据老陈

2026-6-30

解决React通过Axios请求Express接口的网络错误问题

你的问题大概率是跨域资源共享(CORS)或者端口冲突导致的，以下是具体的排查和解决步骤：

1. 检查端口冲突

如果你的React项目是用create-react-app创建的，默认会运行在3000端口，而你的Express服务器也配置了监听3000端口，这会导致其中一个服务无法启动。但你提到服务器正常运行，说明React可能运行在其他端口（比如3001），此时两个服务属于不同源，浏览器会拦截跨域请求。

解决端口冲突：

修改Express服务器的端口，比如改成3001：

const PORT = process.env.PORT || 3001;

同时更新React组件中的请求地址：

axios.get('http://localhost:3001/api/books')

2. 配置CORS允许跨域请求

即使端口不冲突，只要前端和后端的域名/端口不同，就需要在Express中配置CORS来允许前端的请求：

步骤：

安装cors中间件：

npm install cors

在Express代码中引入并使用cors：

const express = require('express');
const cors = require('cors'); // 新增
const app = express();

app.use(cors()); // 新增，允许所有跨域请求

const books = [
  { id: 1, title: 'Harry Potter and the Sorcerer\'s Stone', author: 'J.K. Rowling' },
  { id: 2, title: 'The Hobbit', author: 'J.R.R. Tolkien' },
  { id: 3, title: 'To Kill a Mockingbird', author: 'Harper Lee' }
];

app.get('/api/books', (req, res) => {
  res.json(books);
});

const PORT = process.env.PORT || 3001; // 修改端口避免冲突
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});