javascript - 表单提交不遵循重定向 (Node.js)

Question

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

在我的 NodeJS 后端中，我有一个基于 Passport 的身份验证流程，它可以与 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 请求的响应内容加载，而不是我的用户被重定向到它。

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

Answer 1

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

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

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