时间戳

首页 > 解决方案 > 如何修复 404 错误 Node JS Express POST 请求

javascript - 如何修复 404 错误 Node JS Express POST 请求

问题描述

我正在尝试将以下 html 表单提交到 js 文件：

                        <form action="/submit-form" method="POST">


                             <input type="text" name="username">

                             <button> Click Here Now </button>


                        </form>

这是我要提交的文件。我试过移动文件夹，更改端口，但似乎没有任何效果。

          var express = require('express');

          var app = express();
          
          app.listen(80, function(){ 

           console.log("Hello whatsup");

         })
         app.post('/submit-form', function(req,response){

              console.log("All great");
    
          })

这两个文件都在我的 Xampp htdocs 文件夹中，特别是位于包含为这个特定项目制作的文件夹中。它包含 package.json 文件、node_modules 文件夹、js 文件和 html 表单。

标签： javascriptformsexpresspost

解决方案

如果您只是在本地运行表单而没有托管/渲染，那么您需要为其指定 url 以了解如何访问您的本地服务器。

示例 1：

使用您的代码示例，但稍作修改以使用非相对路径

假设您index.html在您的机器中创建一个文件并通过浏览器打开它，并按照上面的示例使用以下内容

<form action="http://localhost:8080/submit-form" method="POST">
  <input type="text" name="username">
  <button> Click Here Now </button>
</form>

以上假设您的服务器设置如下，端口为 8080。我所做的只是修改代码中的端口

假设您有一个 server.js 文件，以node server.js. 注意：这假设您的 node_modules 中已经有 express

      var express = require('express');

      var app = express();
      
      app.listen(8080, function(){ 

       console.log("Hello whatsup");

      })
      app.post('/submit-form', function(req,response){
          console.log("All great");

      })

示例 2：

使用您的代码示例来解释相对路径

如果您将服务器和客户端都托管在同一台服务器中，那么用于 index.html 的 url 与用于服务器的 url 相同。然后你可以使用你拥有的相对路径

<form action="/submit-form" method="POST">
  <input type="text" name="username">
  <button> Click Here Now </button>
</form>

因为这将寻找您正在渲染的域。假设您正在渲染并最终得到一个域http://awesomeurl.com，然后当您的表单点击 /submit-form 时，它将http://awesomeurl.com/submit-form使用 POST 请求进行调用。如果您的服务器也托管并使用相同的 url 公开，那么一切都会正常工作。

推荐阅读