Search code examples
javascriptnode.jspostfetchejs

Fetch does not POST from the Client-Side to the Server-side (Node.js)


Problem: I am using the following code provided by StackOverflow members. I like the code, and I wish it worked, but it did not, as I will explain:

The Purpose: Take input from the Client-Side, modify it with JavaScript, then POST the modified variables to the Server-Side (Node.js/Express).

The Code (credit to kwh):

<body>
  <script type="text/javascript">
    function customSubmit() {
      const name = document.getElementById('name').value + ' mock';
      const city = document.getElementById('city').value + ' mock';
      fetch('/posty', {
        method: 'POST',
        body: JSON.stringify({ name, city })
      })
    }
  </script>
  <form onsubmit="event.preventDefault(); customSubmit()">
    <label for="name">Name: </label>
    <input id="name" name="name" type="text">

    <label for="city">City: </label>
    <input id="city" name="city" type="text">

    <button type="submit">submit</button>
  </form>  
</body>

I have node.js and express.js serverside, and I have not installed node-fetch. I use EJS as templating engine/file for HTML and JS for the Client-Side.

Client side code:

app.post('/posty', (req,res) => {

    console.log(req.body)
 
})

which returns an empty object in the console (Linux terminal):

{}

Now if I replace the following line in the code:

<form onsubmit="event.preventDefault(); customSubmit()">

with

<form action="/posty" method ="POST">

I will get a non-empty object in the console:

{ name: 'John', city: 'Berlin' }

However, this is not the solution because I have to modify the person's name and the city before POSTing it to the Server-Side (Node.js).

Discussion:

I have not installed node-fetch for node.js. Even, If I installed it, I would have to import the module in a node.js server file that runs on the Server-Side, not on the Client-Side. I cannot see the point of installing node-fetch on node.js to use fetch() to POST in HTML/JS code running on a compatible browser on the Client-Side.

Maybe something is missing in the given codes above, either on the Server-Side or Client-Side, or both. I would appreciate it if someone could point that out. Also, I want to thank kwh, who provided the clean and compact code and helped organize my research to solve the problem.


Solution

  • Thanks for your responses. I find the solution with the help of two StackOverflow members and one of the other posts on StackOverflow forum:

    I had to add the following line to fetch() block in the code that kwh suggested (Client-Side):

    headers: new Headers({ "Content-Type": "application/json" })
    

    Also, I added the following line to the code on the Server-Side as Ifaruki suggested:

    app.use(express.json())
    

    So one line of code was missing on the Server-Side and one on the Client-Side. I needed both.

    Thanks again for your fast response and your help.