如何使用 Express.js 将用户重定向到不同的网页？ （是的，我尝试过使用`redirect`方法）[重复]

Posted 2023-03-05

【中文标题】如何使用 Express.js 将用户重定向到不同的网页？ （是的，我尝试过使用`redirect`方法）[重复]

【英文标题】：How to redirect user to different web page using Express.js? (Yes, I have tried using the `redirect` method) [duplicate]

【发布时间】：2021-12-01 10:47:59

【问题描述】：

我正在使用 Express.js 后端创建一个没有前端框架（jQuery 除外）的简单 Web 应用程序。提交注册表单后，我正在尝试将用户重定向到不同的页面，但不是加载其他页面，而是将页面的 html 代码打印到控制台...向您展示会更容易：

处理表单提交的前端脚本

$("#registration-form").on("submit", event => 
  const formData = convertFormToJson($("#registration-form"));

  $.ajax(
    type: "POST",
    url: "api/auth/registration",
    data: JSON.stringify(formData),
    contentType: "application/json;charset=UTF-8",
    success: function(data) 
      console.log(data); // This is where the HTML code is being printed
    ,
    error: function(request, status, error) 
      console.log(error);
    
  );

  event.preventDefault();
);

我的后端 index.js

app.post("/api/auth/registration", (req, res) => 
  const  email, password, confirmPassword  = req.body;
  
  // Authenticate credentials... 

  res.redirect("/login");
  
);

app.get("/registration", (req, res) => 
  console.log('registration');
  res.sendFile(__dirname + "/registration.html");
);

app.get("/login", (req, res) => 
  console.log("login");
  res.sendFile(__dirname + "/login.html");
)

所以我使用res.redirect("/login");，它正确地调用了快速路由“/login”。但不是浏览器显示登录页面，而是通过ajax 调用的success 方法中的console.log(data) 方法调用将页面的代码打印到控制台。任何想法为什么会发生这种情况？

【问题讨论】：

您不能将浏览器重定向为对 AJAX 调用的响应 - 使用您的客户端代码/标头来读取响应代码并相应地更改 window.location。

@esqew 感谢您的回复。这就是我现在使用的解决方法，但它似乎正是这样，一个混乱的解决方法。这真的是推荐的策略吗？

这能回答你的问题吗？ What is the difference between post api call and form submission with post method?

是的，谢谢@Phil！我将使用您引用的答案来回答我的问题。

【参考方案1】：

感谢@Phil，我找到了related question 的答案，恰好解释了我遇到这个问题的原因。这是引用答案的引用： 从浏览器提交表单有多种方式：

HTML 表单，提交按钮，用户按下提交按钮，不涉及 javascript。 页面中的 HTML 表单，Javascript 获取表单的 DOM 元素并在表单对象上调用 .submit() 方法。 Ajax 调用使用 XMLHttpRequest 接口和 POST 方法并手动发送适当的表单数据。 使用 POST 方法调用 Ajax Fetch 并手动发送适当的表单数据。 使用#1 或#2，浏览器发送表单，浏览器会注意重定向，并在浏览器中显示表单响应（无论是否重定向）。

使用 #3 和 #4，表单通过 Javascript 发送，响应返回到您的 Javascript。 #3 不处理重定向。 #4 具有处理重定向的选项。以下是有关上述每个选项的更多信息。 #3 和 #4 不影响浏览器显示完全不受影响，除非您编写自己的 Javascript 来处理请求并影响浏览器显示（通过插入内容或将 window.location 设置为新 URL。

因为我是在进行 ajax fetch 调用而不是让 HTML 表单处理自己的提交，所以浏览器没有响应重定向。

修复：我只是简单地取出了jQuery ajax方法，并在表单中包含method和action标签，导致表单直接提交到服务器。