I am trying to get started with Node and React. I have followed the instructions here in an attempt to create an API: https://www.linkedin.com/pulse/connecting-reactjs-nodejs-bit-by-bit-guide-ataur-rahman. Here is my Node.js code:

const express = require('express');
const app = express();
const port = 3001; // or any other port you prefer

app.get('/api/data', (req, res) => {
  // Handle your API logic here
  const data = { message: 'Hello from the server!' };
  res.json(data);
});

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

Here is my React code:

'use client';

import React, { useEffect, useState } from 'react';

import axios from 'axios';

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

  useEffect(() => {
    axios.get('http://localhost:3001/api/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;

If I open my browser and browse directly to the endpoint; I see the desired output i.e. ‘Hello from the server!’ is included in the output, however if I browse to the React webpage then ‘Hello from the server!’ is not included in the output. What am I doing wrong?

React and Node are running from localhost, so it cannot be a CORS issue.