你遇到的这个情况太常见了——明明是提前规划好的回退逻辑，结果Chrome控制台把预期内的404当成错误打出来，看起来像是程序出了问题，确实挺闹心的。这里有两个实用的解决办法，你可以根据自己的场景选：

方法一：主动处理第一个请求的响应（兼容性好） #

Chrome之所以会把404记录成错误，很大一部分原因是未读取错误响应的响应体。我们只需要在确认第一个请求返回404后，主动读取它的响应内容，就能避免控制台报错。修改后的代码如下：

let resp;
try {
  resp = await fetch("url1");
  if (!resp.ok) {
    // 读取响应体，消除控制台的404错误日志
    await resp.text();
    // 回退到默认文件
    resp = await fetch("url2");
  }
} catch (err) {
  // 处理真正的网络异常（比如断网、跨域问题）
  resp = await fetch("url2");
}

这个方案不需要依赖服务器的特殊配置，不管是哪种后端服务基本都能正常工作。

方法二：用HEAD请求提前探测（更高效） #

如果不想浪费带宽去加载不存在的文件内容，可以先用HEAD请求去检查文件是否存在——HEAD请求只会返回响应头，不会下载响应体，性能更优。代码示例：

let resp;
try {
  const checkResp = await fetch("url1", { method: "HEAD" });
  if (checkResp.ok) {
    // 文件存在，正常获取
    resp = await fetch("url1");
  } else {
    // 文件不存在，加载默认文件
    resp = await fetch("url2");
  }
} catch (err) {
  // 网络异常时直接回退
  resp = await fetch("url2");
}

不过要注意，这个方案要求你的服务器支持HEAD请求，如果后端禁用了HEAD方法，就没法用啦。

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