运行节点服务器时出现 404答案

【问题标题】：404 when running node server运行节点服务器时出现 404
【发布时间】：2020-03-17 07:21:47
【问题描述】：

嗨，学习使用节点和其他后端组件，在运行简单的输入表单时遇到这个 404：

Not Found
404

NotFoundError: Not Found
    at /Users/samgniel/Desktop/saas-tutorial/app.js:25:8
    at Layer.handle [as handle_request] (/Users/samgniel/Desktop/saas- 
tutorial/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/samgniel/Desktop/saas- 
tutorial/node_modules/express/lib/router/index.js:317:13)
    at /Users/samgniel/Desktop/saas-tutorial/node_modules/express/lib/router/index.js:284:7
    at Function.process_params (/Users/samgniel/Desktop/saas- 
tutorial/node_modules/express/lib/router/index.js:335:12)
    at next (/Users/samgniel/Desktop/saas- 
tutorial/node_modules/express/lib/router/index.js:275:10)
    at SendStream.error (/Users/samgniel/Desktop/saas-tutorial/node_modules/serve- 
static/index.js:121:7)
    at SendStream.emit (events.js:210:5)
    at SendStream.error (/Users/samgniel/Desktop/saas- 
tutorial/node_modules/send/index.js:270:17)
    at SendStream.onStatError (/Users/samgniel/Desktop/saas- 
tutorial/node_modules/send/index.js:421:12)

输入表单的代码是：

<form action="/signup" method="post">
  <input required type="email" name="email" id="emailForm" placeholder="Your Email">
  <input type="password" name="password" id="passwordForm" placeholder="Password">
  <input type="submit" name="" id="" value="Signup!">
</form>

而.js的调用函数是：

app.post('/signup', function(req, res, next) {
console.log(req.body);
});

将不胜感激帮助解决此错误:)

【问题讨论】：

向我们展示 app.js 中第 25 行发生的情况
app.use(function(req, res, next) { next(createError(404)); });
好的...您的应用程序达到 404...我不知道您遵循的教程，但我可以写出一种让您的代码正常工作的方法
当然，那太好了
如果您粘贴后端代码，那么尽早解决可能会有所帮助

标签： javascript node.js http-status-code-404 ejs

【解决方案1】：

您似乎没有向客户端返回任何响应。您可以纠正的一种方法是使用 express 提供的 res 对象中的 send 函数。

app.post('/signup', function(req, res, next) {
    console.log(req.body);
    res.send('Hello World') // this can also take an object as response. res.send({ msg: 'hello world' })
});

这也可能有助于删除这条线ok comment out this line app.use(function(req, res, next) { next(createError(404)); });

希望这会有所帮助。

【讨论】：

尝试此操作后相同的 404
ok 注释掉这一行app.use(function(req, res, next) { next(createError(404)); });

【解决方案2】：

抱歉耽搁了...我试图将它托管在代码沙箱上...

你可以像这样制作你的节点端

const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const path = require("path");

const app = express();
const router = express.Router();
const PORT = process.env.PORT || 5000;

app.use(cors());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

router.get("/", function(req, res) {
  res.sendFile(path.join(__dirname + "/index.html"));
});

router.post("/signup", (req, res) => {
  console.log(req.body);
});

app.use(router);

app.listen(PORT, () => {
  console.log(`Server started at PORT:${PORT}`);
});

然后创建一个 HTML 文件，您将在其中使用 fetch API 使用 API

类似的东西

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <form action="/signup" method="post">
      <input
        required
        type="email"
        name="email"
        id="emailForm"
        placeholder="Your Email"
      />
      <input
        type="password"
        name="password"
        id="passwordForm"
        placeholder="Password"
      />
      <input type="submit" name="" id="submit" value="Signup!" />
    </form>

    <script>
      const emailForm = document.querySelector('#emailForm');
      const passwordForm = document.querySelector('#passwordForm');
      const submit = document.querySelector('#submit');

      const submitFetch = (url, data) => {
        fetch(url, {
          method: 'POST',
          mode: 'cors',
          cache: 'no-cache',
          credentials: 'same-origin',
          headers: {
            'Content-Type': 'application/json'
          },
          redirect: 'follow',
          referrer: 'no-referrer',
          body: JSON.stringify(data)
        }).then(response => response.json());
      };

      submit.addEventListener('click', e => {
        e.preventDefault();
        const data = {
          email: emailForm.value,
          password: emailForm.value
        };
        submitFetch('http://localhost:5000/signup', data);
      });
    </script>
  </body>
</html>

如果您想现场观看...我将其托管在代码沙盒上

https://codesandbox.io/s/lucid-cannon-x1wu1

【讨论】：