React前端与Node后端通过HTTP请求实现数据交互，1. Node使用Express提供RESTful API，需启动服务并暴露接口；2. React用axios调用API，发送GET/POST请求获取或提交数据；3. 配置cors中间件解决跨域问题；4. 可在React中设置proxy代理简化请求路径；5. 完善错误处理、加载状态及拦截器提升用户体验，确保接口连通性与稳定性。
React前端与Node后端对接，本质是通过HTTP请求实现前后端数据交互。只要后端提供标准的RESTful或GraphQL API，前端就能调用。以下是完整的对接流程，从环境准备到实际调用，一步步说明。
1. 确保Node后端提供可访问的API接口
Node.js后端通常使用Express框架搭建服务。你需要确认后端已经启动，并暴露了可用的API端点。
示例：一个简单的Node + Express后端API安装依赖：
npm install express cors
创建 server.js：
立即学习“前端免费学习笔记（深入）”；
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors()); // 允许跨域请求
app.use(express.json());
// 模拟数据接口
app.get('/api/users', (req, res) => {
res.json({ users: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }] });
});
app.post('/api/users', (req, res) => {
const newUser = req.body;
res.status(201).json({ message: '用户创建成功', user: newUser });
});
app.listen(5000, () => {
console.log('Node服务器运行在 http://localhost:5000');
});
启动后端：
node server.js
此时，API地址为：http://localhost:5000/api/users
2. React前端发起请求调用API
React项目通常使用 fetch 或 axios 发送HTTP请求。下面以 axios 为例（推荐，更简洁）。
安装 axios：
npm install axios
在React组件中调用API：
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function UserList() {
const [users, setUsers] = useState([]);
// 获取用户列表
useEffect(() => {
axios.get('http://localhost:5000/api/users')
.then(response => {
setUsers(response.data.users);
})
.catch(error => {
console.error('请求失败:', error);
});
}, []);
// 提交新用户
const addUser = () => {
const userData = { name: 'Charlie' };
axios.post('http://localhost:5000/api/users', userData)
.then(response => {
alert(response.data.message);
})
.catch(error => {
console.error('提交失败:', error);
});
};
return (
用户列表
{users.map(user => (
- {user.name}
))}
);
}
export default UserList;
3. 解决跨域问题（CORS）
开发阶段最常见的问题是“跨域请求被阻止”。React默认运行在 http://localhost:3000，而Node服务在 http://localhost:5000，属于不同源。
解决方案已在Node端使用 cors 中间件解决：
app.use(cors());
这将允许所有来源的请求。生产环境中可配置具体域名限制。
4. 配置代理（可选，简化开发）
为避免每次写完整URL，可在React项目中设置代理。
修改 package.json 添加：
"proxy": "http://localhost:5000"
之后前端请求可简化为：
axios.get('/api/users')
注意：代理只在开发环境（npm start）下生效，打包部署后需配合Nginx等反向代理处理路径。
5. 错误处理与用户体验优化
真实项目中应增强错误处理，例如网络中断、超时、后端报错等。
建议做法：
- 使用 try/catch 包裹异步请求（尤其使用 async/await 时）
- 显示加载状态（loading）提升体验
- 统一处理401（未登录）、403（权限不足）跳转登录页
- 添加请求拦截器和响应拦截器（axios.interceptors）
基本上就这些。只要后端接口稳定、返回格式清晰，前端调用并不复杂。关键是确保服务能通、CORS配置正确、请求路径无误。调试时多看浏览器开发者工具的Network面板，能快速定位问题。不复杂但容易忽略细节。
