Trying to pass data into a webhook's _req variable

[Filip-S]

I'm trying to pass data from the frontend to a webhook using fetch's body payload. (If there is a better or more consistent way of doing this pleas let me know.) But whenever I check the requests body, it lacks any sort of body. The fetch is called on click in the following method:

let TEST = async() => {
        const payload = JSON.stringify({text:"THIS IS THE PAYLOAD"});
        try{
            const response = await fetch("/api/return/TEST",{
                method:"PUT",
                header:{
                    "Content-Type": "application/json",
                },
                body:payload
            });

            console.log("PUT RESPONSE: " + JSON.stringify(response));
        }catch(err){
            console.error("ERROR:",err);
        }
    }

but when I log the request on the corresponding webhook the body is nowhere to be found.

app.put("/api/return/TEST", async (_req,res) => {
  let status = 200;
  let error = null;
  
  try {
    console.log(JSON.stringify(_req.body));//req.body always is empty/null
  } catch(e){
    console.log(`Failed to process return/create: ${e.message}`);
    status = 500;
    error = e.message;
  }
  res.status(status).send({success: status === 200, error});
}
);

I've tested this both on chrome and firefox, both of which have the same result. Is there something I'm doing wrong, or is there a better way of passing data from the frontend to a webhook.

[Filip-S]

I should also add that the payload does show up correctly in the page inspect's console, on both firefox and chrome

[Liam · Accepted solution]

HI Filip-S,

Your code seems to be correct except for a small typo in the fetch headers. You have used "header" instead of "headers". Try making that change and seeing if it works as expected. 

Also, ensure that you have body-parser middleware setup in your express app to parse incoming request bodies in a middleware before you handle them, eg:

const express = require('express');
const app = express();
const bodyParser = require('body-parser');

app.use(bodyParser.json()); // for parsing application/json

app.put("/api/return/TEST", async (_req,res) => {
  let status = 200;
  let error = null;

  try {
    console.log(JSON.stringify(_req.body)); // Now, req.body should have the data
  } catch(e){
    console.log(`Failed to process return/create: ${e.message}`);
    status = 500;
    error = e.message;
  }
  res.status(status).send({success: status === 200, error});
});

This should solve your problem. The body-parser middleware is used to parse the incoming request bodies in a middleware before your handlers, available under the `req.body` property.

Hope this helps!