前后端联调测试报错求助（附代码及错误截图）

问题描述 #

完成 React 前端与后端的连接后测试时出现报错，涉及文件包括：

• server package.json
• server index.js
• client (React) package.json
• client (React) App.jsx
  同时存在对应报错截图。

排查与解决方向 #

1. 跨域（CORS）问题 #

若报错包含跨域相关提示，需在后端配置 CORS 允许前端请求：

// 后端 index.js 中引入并使用 cors 中间件
const cors = require('cors');
app.use(cors({ origin: 'http://localhost:3000' })); // 替换为你的前端实际地址

2. 请求地址/端口不匹配 #

检查前端请求的后端 URL 是否正确：比如后端运行在 localhost:5000，前端发起请求时需确保路径为 http://localhost:5000/xxx，同时确认后端服务已在对应端口正常启动。

3. 依赖缺失或版本兼容问题 #

• 后端：确认 package.json 中的核心依赖（如 express、cors）已安装，执行 npm install 补全缺失依赖。
• 前端：若使用 axios 等请求库，确认已安装对应依赖包。

4. 路由配置错误 #

核对 server index.js 中的路由路径与前端请求路径是否完全一致，比如前端请求 /api/getData，后端需配置对应的 app.get('/api/getData', (req, res) => {...}) 处理逻辑。

5. 端口占用冲突 #

检查前后端端口是否被其他程序占用，若占用可修改配置文件中的端口号（如后端改 5001，前端改 3001），确保两者端口互不冲突。

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