17370845950

express 的 `res.redirect()` 在前端使用 `fetch` 时不会触发页面跳转，因为 `fetch` 是异步 api，不会自动处理重定向响应；需在客户端解析响应并手动跳转或刷新。

在基于 Express 的轻量级 Web 应用中，若前端使用 fetch 发起 POST 请求（

如删除列表项），调用 res.redirect('/') 并不能像传统表单提交那样自动触发浏览器跳转或刷新——这是因为 fetch 默认忽略 3xx 重定向响应，仅将其视为普通响应，且不更新当前 URL 或重新渲染页面。

根本原因在于：fetch 的重定向行为由 redirect 选项控制，默认为 'follow'（会自动跟随重定向请求），但即使跟随，它也只获取目标 URL 的响应体，不会改变浏览器地址栏，也不会触发 HTML 重载。因此，尽管服务器返回了 302 Found 并指向 /，fetch 仅拿到 / 返回的 HTML 字符串（若未显式处理），而页面 DOM 依然保持原状。

✅ 正确做法是：服务端不再依赖 HTTP 重定向，而是返回结构化 JSON 响应，由前端主动控制导航。修改如下：

1. 修改 app.js 的 POST 路由：

app.post('/', (req, res) => {
    const id = parseInt(req.body.id, 10);
    if (!isNaN(id) && id >= 0 && id < myArray.length) {
        myArray.splice(id, 1);
    }
    // 不再使用 res.redirect()
    res.json({ success: true, redirectUrl: '/' });
});

2. 更新 template.html 中的 fetch 处理逻辑：

⚠️ 注意事项：

• 不要混用 res.redirect() 和 fetch：二者设计范式冲突。redirect() 适用于传统表单提交（
  ）或 window.location 触发的同步请求。
• ID 安全性：示例中直接使用 item.id 作为数组索引，需确保其为有效数字，避免 splice() 异常；建议增加类型与范围校验（如上所示）。
• 状态同步：若后续需支持无刷新更新（如局部 DOM 删除），可改用 res.json({ success: true, updatedHtml: ... }) 并用 JS 动态移除对应

  元素，进一步提升体验。

此方案兼顾语义清晰性与浏览器兼容性，是现代 Fetch + Express 应用的标准实践。