如何避免请求失败后刷新页面导致表单重复提交？

这个问题其实挺典型的——你已经用POST/REDIRECT/GET处理了成功场景，但失败时直接返回表单的话，浏览器会把这次POST请求的响应缓存，刷新就会触发重复提交。核心解决思路就是把失败场景也纳入PRG模式，用会话暂存错误信息和用户输入，再重定向回GET页面渲染。

结合你的Node.js + Handlebars场景，我给你详细说下具体实现方式：

方案：用Session暂存错误状态，重定向回GET表单页 #

步骤很清晰，完全适配你的现有逻辑：

1. 当POST验证失败时，不直接渲染表单，而是把用户输入的内容和错误信息存在Session里，然后重定向到GET /task/new
2. 在GET /task/new的路由里，读取Session里的暂存数据，传给模板渲染，同时立刻清空Session（避免用户刷新后还显示旧错误）

具体代码示例

首先确保你的项目已经配置了Session中间件（比如express-session），然后修改路由逻辑：

POST /task 路由

app.post('/task', (req, res) => {
  const { title } = req.body;
  const validationErrors = {};

  // 你的验证逻辑
  if (!title || title.length < 3) {
    validationErrors.title = '标题长度不能少于3个字符';
  }

  if (Object.keys(validationErrors).length > 0) {
    // 把用户输入和错误存入Session
    req.session.formState = {
      inputTitle: title,
      errors: validationErrors
    };
    // 重定向回表单的GET页面
    return res.redirect('/task/new');
  }

  // 验证成功的原有逻辑：创建任务并重定向
  const newTaskId = createTask(title); // 假设这是你的任务创建函数
  res.redirect(`/task/${newTaskId}`);
});

GET /task/new 路由

app.get('/task/new', (req, res) => {
  // 从Session取暂存的表单状态，没有的话用默认空值
  const formState = req.session.formState || {
    inputTitle: '',
    errors: {}
  };
  // 取出后立即清空Session，避免后续刷新重复显示旧状态
  delete req.session.formState;

  // 传给Handlebars模板的数据
  res.render('task-new', {
    titleFromFailedRequest: formState.inputTitle,
    validationErrors: formState.errors
  });
});

你的Handlebars模板无需修改

原来的模板逻辑完全兼容：第一次访问时titleFromFailedRequest是空字符串，错误提示不会显示；重定向过来时会自动填充输入值并展示错误信息。

为什么这个方案有效？ #

• 重定向后浏览器地址栏变为GET /task/new，用户刷新时只会发送GET请求，彻底避免重复提交POST表单
• Session里的错误和输入值只存一次，取出就清空，不会导致用户刷新页面后还看到旧的错误提示
• 完全符合POST/REDIRECT/GET的设计模式，前后端体验一致，而且不依赖前端JS（对禁用JS的用户也友好）

注意事项 #

• 必须配置Session中间件：比如Express项目里用express-session，开发环境可以用内存存储，生产环境建议用Redis等持久化存储保证可靠性
• 如果你的应用是无状态的（不想用Session），也可以把错误和输入值编码到重定向的URL参数里，但这种方式会把数据暴露在地址栏，且URL长度有限制，所以还是Session方案更稳妥。

备注：内容来源于stack exchange，提问作者Farad