React项目使用Fetch获取后端数据报错，求正确实现方案

问题根源 #

你遇到的错误是因为Fetch请求没有正确代理到后端服务，反而获取到了React项目的index.html文件，导致解析JSON失败。核心问题出在proxy配置格式错误，其次可能是未重启开发服务器。

正确实现步骤 #

1. 修正Package.json中的Proxy配置 #

你当前的proxy配置格式有误："https:127.0.0.1:5000"缺少协议后的//，且如果后端未启用HTTPS，应使用http协议。修改为：

"proxy": "http://localhost:5000"

或者：

"proxy": "http://127.0.0.1:5000"

2. 重启React开发服务器 #

Proxy配置修改后必须重启React的npm start服务，否则新配置不会生效。

3. 验证Fetch请求 #

保持你的Fetch代码不变，建议添加错误捕获便于排查：

fetch("/api/chat")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error("请求错误：", err));

打开浏览器开发者工具的Network标签，查看请求的Response内容：

• 如果返回预期的JSON数据，说明代理生效；
• 如果仍返回HTML，检查后端接口路径是否与请求路径一致（比如后端是/api/chat/带斜杠，而请求是/api/chat，部分后端框架可能会重定向导致返回HTML）。

4. 备选方案：直接使用绝对路径（临时测试） #

如果Proxy仍未生效，可以临时用绝对路径请求（注意会触发跨域，需后端配置CORS）：

fetch("http://localhost:5000/api/chat")
  .then(res => res.json())
  .then(data => console.log(data));

以Express后端为例，添加CORS配置：

const cors = require('cors');
app.use(cors());

但推荐优先使用React开发环境的Proxy方案，避免跨域配置的额外麻烦。

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