时间戳

首页 > 解决方案 > 我无法重定向到 Node.js API 中的 HTML 页面

javascript - 我无法重定向到 Node.js API 中的 HTML 页面

问题描述

我有几个 API 端点 /auth/register 和 /auth/login 并且 /auth 是基本 URL，并且在 /register 和 /login 上有端点。

我的文件夹结构是：

在此处输入图像描述

我正在从 app.js 重定向注册页面，它可以工作：

app.get('/', (req, res, next) => {
  res.set({ 'Access-Control-Allow-Origin': '*' })
  return res.redirect('signup.html')
  // res.status(200).send('Yes, working')
})

但是当我点击注册页面上的提交按钮时，它不会重定向到登录页面。这是注册页面：

<!DOCTYPE html>
<html>
    <head>
        <title>Signup</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <br>
        <br>
        <br>
        <div class="container" >
            <div class="row">
                <div class="col-md-3">
                </div>
                <div class="col-md-6 main">
                    <form action="/auth/register" method="post">
                        <h1> Signup form </h1>
            <input class="box" type="text" name="firstName" id="firstName" placeholder="Enter your First Name"  required /><br>
            <input class="box" type="text" name="lastName" id="lastName" placeholder="Enter your Last Name"  required /><br>
                        <input class="box" type="email" name="email" id="email" placeholder="Enter your E-Mail " required /><br>
                        <input class="box" type="password" name="password" id="password"  placeholder="Enter your Password " required/><br>
                        <input class="box" type="text" name="role" id="role"  placeholder="Enter your Role " required/><br>
                        <br>
                        <input type="submit" id="submitDetails"  name="submitDetails" value="Submit Your Details" /><br>
                    </form>
                </div>
                <div class="col-md-3">
                </div>
            </div>
        </div>
    </body>
</html>

我的 /auth/register API

router.post('/register, (req, res, next) => {
res.redirect('signin.html')
//also tried ../public/signin.html
//also tried sendFile but it unable to load css file
})

因此，我似乎犯了与路径相关的错误，因为当我从 app.js 加载时它可以工作，但是当 /auth/register 运行驻留在 auth 文件夹中时，它无法重定向。

标签： javascriptnode.jsexpress

解决方案

 return res.redirect('signup.html')

 redirect(url)

您将用户重定向到一条路线，因此您必须传递一个 url。例如：

redirect("/myPage")

为了向客户端显示此端点，您应该已经定义了此端点。但看起来你想发送一个 html 文档而不是将用户重定向到不同的路由。所以你应该有：

 res.sendFile("signup.html")

编写此代码后，express 将自动查找静态文件夹。所以你应该已经告诉 express 公开文件的位置。然后 express 将进入公用文件夹并在公用文件夹中查找 signup.html 并将其发送。

这是您告知 express 静态文件位置的方式。

  app.use(express.static('public'))

这意味着根目录中“公共”文件夹内的文件是公开可用的。

由于express.static是中间件功能，因此必须将其放在路由之前。因为在这种情况下

router.get("/myPage",(req,res)=>{
res.sendFile("signup.html")})

   app.use(express.static('public'))

当客户端点击“，myPage”端点时，由于此端点不知道公用文件夹的位置，您的应用程序将抛出错误。

您放置的此代码具有不同的目的：

router.post('/register, (req, res, next) => {
res.redirect('signin.html')
//also tried ../public/signin.html
//also tried sendFile but it unable to load css file
})

router.post 表示向“/register”发送 POST 请求。发布请求是客户端发送一些数据或向端点提交表单时。但是访问一个网站是一个 GET 请求。因此，如果您想向用户显示某些内容，则需要使用router.get().

推荐阅读