表单提交不遵循重定向（Node.js）答案

【问题标题】：Form submit not following redirect (Node.js)表单提交不遵循重定向（Node.js）
【发布时间】：2019-03-06 21:37:24
【问题描述】：

我有一个带有 NodeJS 后端的基本 HTML 网站。

在我的 NodeJS 后端，我有一个基于护照的身份验证流程，该流程可以与 API 端点 /api/login 一起正常工作以启动身份验证。

在我的 HTML 中，我有一个提交用户电子邮件/密码的基本表单：

<form action="api/login" method="POST" class="cozy">
  <input type="text" id="email" name="email" class="form-control form-control-rounded" placeholder="Your registered email" required>
  <input type="password" id="password" name="password" class="form-control form-control-rounded" placeholder="Your password" required>
  <button type="submit" class="btn btn-accent btn-rounded">Login
	  <i class="fas fa-long-arrow-alt-right ml-2"></i>
	</button>
</form>

如果身份验证成功，我的 NodeJS 端点返回 302 状态，标题为 Location: /app/index.html 这是我的应用程序的“仪表板”页面只有登录后才能访问。

app.post('/api/login', 
	passport.authenticate('local-login', {
		successRedirect: '/app/index.html',
		failureRedirect: '/login.html'
	})
);

app.get('/app/index.html', ensureAuthenticated, function(req, res) {
	return res.sendFile(path.join(__dirname + '/private/index.html'));
});

现在我的浏览器不是重定向到此页面，而是在 /app/index.html 上执行 XHR 请求，并且我的仪表板页面作为 XHR 请求的响应内容而不是我的用户加载被重定向到它。

有人知道我做错了什么吗？

【问题讨论】：

请用您的代码更新您的问题，用于此页面的 app.js 路由和所有表单输入。
您说它“正在执行 XHR 请求”，这意味着我们还需要查看该代码，以了解为什么表单操作与您的请求所击中的端点不匹配。当您在目录名称中使用 index.html 时，我现在也会在您的表单操作中使用整个限定 URL。根据您的服务器阻止设置，如果您的路径不明确，这可能会给您带来意想不到的结果。
所有代码看起来都正确。页面上是否有我们没有看到的任何 JavaScript 逻辑？附加到表单提交处理程序的 JavaScript 可以阻止默认行为并开始发送 XHR 请求。
谢谢@pspi 我禁用了所有外部 JS，现在它可以工作了，所以有一些外部 JS 干扰了我的表单提交。

标签： javascript html node.js forms passport.js

【解决方案1】：

看来您需要更新表单标签才能使用 POST 方法

<form action="api/login" class="cozy" method="POST">

或者，如果您在页面上使用客户端 javascript，您可以拦截表单提交事件，调用 event.preventDefault()，然后使用 fetch 或 jquery 或其他方式将请求发送到服务器。

【讨论】：

【解决方案2】：

请从您的路线中删除.html。在护照身份验证中，您应该将用户重定向到路由而不是某个 .html 文件。在/app/index.html 路由上，您将 index.html 文件作为响应提供。不应该是这样的。不如试试这个。

app.post('/api/login', 
    passport.authenticate('local-login', {
      successRedirect: '/app/index',
      failureRedirect: '/login'
  })
);

对于响应

app.get('/app/index', ensureAuthenticated, function(req, res) {
    return res.sendFile(path.join(__dirname + '/private/index.html'));
});

希望对你有帮助。

【讨论】：