Currently facing a challenge with sending a post request from React to my Express server backend. The request payload seems to be correctly structured, and I can successfully receive a hardcoded response from the server on the frontend.
However, the issue arises when it appears that the data itself is not reaching the server - calling console.log(req.body) on the server returns undefined. It's a puzzling situation.
Upon inspecting the network tab:
- The Headers status shows 200, indicating the request completed
- The Payload displays the JSON object formatted correctly as
{body: {url: "https://example.com"}} - The Response also comes back correctly!
{response: "foo"}
This is the API function on the client-side:
const callBackendAPI = async (query) => {
const response = await axios.post('/', {
body: { url: query },
});
}
Note: Added "proxy": "http://localhost:3001" to the client's package.json file.
On the server side:
const express = require('express');
const app = express();
app.post('/', (req, res) => {
console.log(req.body); // <------ **Here's the issue, there's nothing here**
res.json({ response: 'foo' });
// if I instead send res.json(req.body), the response is empty in the Network tab
});