如何正确处理 Fetch 请求中 EJS 渲染的错误页面响应

问题本质：Fetch 是“静默”的，不触发页面跳转

原生表单提交是导航性（navigational） 操作：服务器返回 HTML，浏览器直接渲染新页面。而 fetch() 是数据获取型（data-fetching） API，它只将响应交给 JavaScript 处理。即使响应状态码为 400 或 500、Content-Type: text/html、且响应体包含完整 HTML，浏览器也不会自动展示该 HTML——除非你主动操作 DOM。

正如你在 Network 面板中观察到的：响应内容确实存在（response tab 中可见完整 EJS 渲染结果），但页面仍停留在原表单页。这是因为 fetch() 成功完成了网络请求（Response 对象已就绪），但后续逻辑未消费 HTML 内容。

正确的前端处理方案

你需要在 fetch().then() 中显式判断响应状态，并根据 response.ok（即 status 在 200–299 范围内）区分成功与失败路径：

AI封面生成器

专业的AI封面生成工具，支持小红书、公众号、小说、红包、视频封面等多种类型，一键生成高质量封面图片。

下载

fetch(this.action, {
  method: "PUT",
  body: JSON.stringify(formData),
  headers: {
    "Content-Type": "application/json;charset=utf-8",
  },
})
.then((response) => {
  if (!response.ok) {
    // ❗关键：读取 HTML 响应体并注入 DOM
    return response.text().then(html => {
      document.open(); // 可选：清空当前文档上下文（更安全）
      document.write(html);
      document.close();
      // 或更可控的方式（推荐）：
      // document.body.innerHTML = html;
      // 注意：若 HTML 含 script 标签，需手动执行（见下方注意事项）
    });
  } else {
    // ✅ 成功：解析 JSON 并跳转
    return response.json().then(data => {
      alert(data.message);
      window.location.href = '/user'; // 显式跳转
    });
  }
})
.catch((err) => {
  console.error("Fetch failed:", err);
  alert("网络请求异常，请检查连接");
});

✅ 推荐写法（避免嵌套，提升可读性）：
使用 async/await 重写，逻辑更线性、错误更易追踪：

form.addEventListener("submit", async function (ev) {
  if (this.dataset.id !== "create") {
    ev.preventDefault();

    const formData = Object.fromEntries(
      new FormData(this).entries()
    );

    try {
      const response = await fetch(this.action, {
        method: "PUT",
        body: JSON.stringify(formData),
        headers: { "Content-Type": "application/json" },
      });

      if (!response.ok) {
        const html = await response.text();
        document.body.innerHTML = html;
        return; // 终止后续逻辑
      }

      const data = await response.json();
      alert(data.message);
      window.location.href = '/user';

    } catch (err) {
      console.error("Fetch error:", err);
      alert("请求发送失败，请稍后重试");
    }
  }
});

⚠️ 重要注意事项

• 脚本执行问题：document.body.innerHTML = html 不会自动执行 HTML 中内联的 <script> 标签。若你的 EJS 错误页依赖 JS 初始化（如表单验证、按钮事件），需额外处理：</script>

  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');
  document.body.innerHTML = doc.body.innerHTML;
  // 手动提取并执行 script 标签（简化版）
  doc.querySelectorAll('script').forEach(script => {
    const s = document.createElement('script');
    s.textContent = script.textContent;
    document.head.appendChild(s);
  });

• SEO 与语义化考量：服务端渲染错误页虽可行，但混合客户端导航（window.location）和服务端渲染（res.render()）可能造成路由状态不一致。更健壮的方案是统一采用 SPA 式错误提示（如 Modal + 表单高亮），仅对致命错误才整页跳转。

• 状态码语义：400 Bad Request 是完全合理的错误响应码（Joi 验证失败），无需改为 200。浏览器是否显示页面与状态码无关，只取决于你是否把 HTML 写入 DOM。

总结

核心原则始终不变：Fetch 不会替代页面，它只提供数据；渲染权永远在前端手中。 掌握这一边界，就能精准控制用户在各种 HTTP 状态下的体验流——既保留服务端模板的开发效率，又不失客户端交互的灵活性。