使用Fetch API获取JSON时持续返回500内部服务器错误求助

架构老林

2026-5-29

解决React中Fetch本地JSON返回500错误的问题

让我帮你一步步排查并解决这个问题：

1. 修正错误的代理配置

你在package.json里设置的"proxy": "http://localhost:3000"完全起不到作用——你的React开发服务器本身就运行在这个端口，等于把请求代理回自己，反而会造成请求逻辑混乱。如果只是访问本地静态JSON文件，直接删掉这个代理配置就好；之后如果要对接后端API，再把代理改成后端服务器的实际地址（比如http://localhost:5000）。

2. 调整静态JSON文件的存放位置

React项目中，只有放在public目录下的文件才能通过URL直接访问。你需要把data/greeting.json移动到项目根目录的public文件夹内，最终路径应该是这样的：

你的React项目/
├── public/
│   └── data/
│       └── greeting.json
└── src/
    └── caller.js

3. 修改Fetch请求的路径与逻辑

因为public是应用的根目录，所以fetch的路径要改用绝对路径/data/greeting.json，而不是相对路径./data/greeting.json（后者会基于当前组件的文件路径去查找，大概率找不到目标文件）。另外，GET请求获取静态JSON时，额外设置headers其实是多余的，浏览器会自动处理；同时建议添加错误捕获逻辑，方便排查问题：

修改后的getGreetings方法：

function getGreetings() {
  fetch(`/data/greeting.json`)
    .then((response) => {
      // 先校验请求是否成功
      if (!response.ok) {
        throw new Error(`请求失败！状态码: ${response.status}`);
      }
      return response.json();
    })
    .then((messages) => {
      console.log("获取到的问候数据:", messages); // 打印变量才能看到实际内容
    })
    .catch((error) => {
      console.error("Fetch请求出错:", error); // 捕获并打印错误信息
    });
}