使用fetch获取JSON文件时出现GET 404(Not Found)错误求助

看起来你在通过Fetch获取本地JSON文件时遇到了报错，我帮你梳理几个常见的问题点和修复方案：

1. 多余的请求头导致的异常 #

当你请求静态JSON文件时，GET请求并不需要设置Content-Type请求头——这个头是用来标识请求体的类型，而GET请求没有请求体，额外添加反而可能让开发服务器或浏览器解析出问题。建议直接移除这个请求头，甚至可以简化整个headers配置：

// 简化后的fetch调用，去掉不必要的headers
fetch('./JSONDATA.json')

2. 文件路径是否正确 #

先确认JSONDATA.json的位置是否和当前执行代码的文件在同一目录下。如果文件在子目录（比如data文件夹），路径要写成./data/JSONDATA.json；如果在上一级目录则是../JSONDATA.json。

可以打开浏览器开发者工具的「Network」面板，查看这个请求的状态：如果是404，那100%是路径写错了。

3. 动态属性访问的错误 #

你代码里的console.log(data.term);这里有个小问题：term是一个变量，要访问对象的动态属性，得用方括号语法，而不是点语法。点语法只能识别字面量属性名，比如data.apple，但变量的话要写成data[term]，否则你其实是在找data里名为term的固定属性，大概率这个属性不存在。

4. 完善错误排查信息 #

你当前的catch块只输出了模糊的错误信息，建议改成输出完整的错误对象，这样能看到更详细的报错原因：

.catch((error) => { 
  console.error('加载JSON文件出错:', error); 
});

修复后的完整代码 #

const onSearchSubmit = (term) => { 
  console.log(term); 
  fetch('./JSONDATA.json')
  .then(function (response) { 
    // 先检查请求是否成功（状态码200-299）
    if (!response.ok) {
      throw new Error(`请求失败！状态码: ${response.status}`);
    }
    return response.json(); 
  }) 
  .then(function (data) { 
    setFruits(data); 
    // 用方括号访问动态属性
    console.log(data[term]); 
  }) 
  .catch((error) => { 
    console.error('加载JSON文件出错:', error); 
  }); 
};

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