I am trying to get started with Node.js. I have created a simple page:

'use client';
import React, { useEffect, useState } from 'react';
import axios from 'axios';

function callApi() {
  const [data, setData] = useState('');

  useEffect(() => {
    axios.post('http://localhost:3001/api/data', {firstName: 'Fred', surname: 'Bloggs'}, {headers: {'Content-Type': 'multipart/form-data'}})
      .then(response => {
        setData(response.data.message);
      })
      .catch(error => {
        console.error(error);
      });
  }, []);

  return (
    <div className="App">
      <h1>React and Node.js Integration</h1>
      <p>Message from the server: {data}</p>
    </div>
  );
}

export default callApi;

and a simple Node.js endpoint that handles post requests:

const multer = require('multer');
const upload = multer();

app.post('/api/data', upload.none(), (req, res) => {
  const formData = req.body;
  console.log('form data', formData);
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET,POST');
  res.setHeader('Access-Control-Max-Age', 2592000); // 30 days
  const data = "Response from POST request: " + formData.firstName + " " + formData.surname
  res.json(data)
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
}); 

I don’t think this is working properly because (1) Fred Bloggs is printed to the Terminal twice in Node.js even though there is only one call to console.log. Also ‘Response from POST request:Fred Bloggs’ is not returned to the client.