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

Question

I am trying to submit the following html form to a js file:

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


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

                             <button> Click Here Now </button>


                        </form>

Here´s the file I want to submit it to. I've tried moving folders around, changing ports, and nothing seems to work.

          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");
    
          })

Both files are on my Xampp htdocs folder, specifically located inside a folder that contains made for this particular project. It contains the package.json files, the node_modules folder, the js file and the html form.

Answer 1

If you're just running form locally with no kind of hosting/rendering then you need to specify the url for it to know how to hit your local server.

Example 1:

Using your code example but modified slightly to use non-relative path

Let's say you create a file index.html in your machine and open it through browser with the following contents per your example above

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

The above assumes your server is setup as follows with port 8080. All I did was modify the port in your code

Let's say you have a server.js file that you start as node server.js . NOTE: This assumes that you already have express in your node_modules

      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");

      })

Example 2:

Using your code example to explain relative path

If you are hosting both the server and client in the same server for which the url used for your index.html is the same as the url used for your server. Then you can use the relative path as you had it

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

Since this will look for the domain that you are rendering from. Let's say you are rendering and end up with a domain http://awesomeurl.com , then when your form hits /submit-form it will then call http://awesomeurl.com/submit-form with the POST request. If your server is also hosted and exposed with same url, then it will all work.