如何修復 404 錯誤 Node JS Express POST 請求

Question

我正在嘗試將以下 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 表單。

Answer 1

如果您只是在本地運行表單而不進行任何托管/渲染，那么您需要指定 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。我所做的只是修改代碼中的端口

假設您有一個以node server.js開頭的 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 時，它將使用 POST 請求調用http://awesomeurl.com/submit-form 。 如果您的服務器也使用相同的 url 托管和公開，那么一切都會正常工作。