Fetch请求获取JSON本地运行正常但线上站点失效问题排查求助

问题根源排查 #

• Fetch API的错误捕获特性是你看不到报错的核心原因：Fetch 只有在网络请求完全失败（如断网、跨域被拦截）时才会进入catch分支，返回404/500等HTTP错误码、响应内容不是合法JSON这类问题都不会触发默认的catch报错，所以你控制台看不到任何错误提示。
• 相对路径匹配错误是高频诱因：本地测试时页面和JSON文件都在同级目录，用Sites.json这类相对路径可以正常请求，但如果线上站点部署在子目录下，相对路径会基于当前页面的上层路径拼接，导致请求的JSON地址和实际文件存放地址不匹配，返回404错误。
• 线上环境配置问题也可能导致异常：包括但不限于：JSON文件本身存在语法错误未被发现、托管服务没有为JSON文件配置正确的Content-Type响应头、站点缓存策略拦截了请求返回了空内容/错误内容。

修复方案 #

1. 先替换原有content函数，增加完整的状态判断和日志输出，部署后打开控制台就能直接定位具体错误点：

// 替换原有content函数
async function content(a){
  try {
    // 打印请求路径，确认拼接后的地址是否正确
    const targetUrl = `${a}.json`;
    console.log('请求目标地址：', targetUrl);

    const response = await fetch(targetUrl);
    // 打印HTTP状态码，判断是否是404/500类错误
    console.log('响应状态码：', response.status, '是否成功：', response.ok);
    if (!response.ok) {
      throw new Error(`HTTP请求异常，状态码：${response.status}`);
    }

    // 校验响应内容类型是否为JSON
    const contentType = response.headers.get('content-type');
    if (!contentType?.includes('application/json')) {
      const rawContent = await response.text();
      throw new Error(`响应内容不是JSON格式，前200位内容：${rawContent.slice(0, 200)}`);
    }

    // 解析JSON并打印确认
    const data = await response.json();
    console.log('解析得到的JSON数据：', data);
    appendData(data);
  } catch (err) {
    // 捕获所有错误并打印
    console.error('请求流程出错：', err);
  }
}

2. 确认线上JSON文件的实际存放路径，直接在浏览器地址栏输入拼接后的JSON地址，看是否能正常访问到内容。如果站点部署在子目录下，可以改用绝对路径（比如/子目录/Sites.json），或者在HTML的<head>标签中添加<base href="/你的站点根路径/">统一处理所有相对路径。
3. 用JSON校验工具检查你的Sites.json、Animals.json等文件的语法，确认没有多余逗号、引号不匹配、编码错误等问题。

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