Tengo un problema al llamar a fetch('/api') desde mi aplicación create-react-app muy básica.

El problema que tengo en la consola es GET http://localhost:3000/api 500 (Internal Server Error)

En mi client/package/json , configuro el proxy en "proxy": "http://localhost:3001", pero cuando llamo a /api , intenta usar el puerto 3000 en lugar del 3001.

Tengo dos servidores ejecutándose, el cliente en 3000 y la API en 3001 y cuando voy a localhost:3001/api veo el {message: "Hello from server!" } json en mi navegador

Mi client/src/App.js :

 import React from "react"; import logo from "./logo.svg"; import "./App.css"; function App() { const [data, setData] = React.useState(null); React.useEffect(() => { fetch("/api") .then((res) => res.json()) .then((data) => setData(data.message)); }, []); return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p>{!data ? "Loading..." : data}</p> </header> </div> ); } export default App;

Mi server/index.js :

 const path = require('path'); const express = require("express"); const PORT = process.env.PORT || 3001; const app = express(); // Have Node serve the files for our built React app app.use(express.static(path.resolve(__dirname, '../client/build'))); app.get("/api", (req, res) => { res.json({ message: "Hello from server!" }); }); app.listen(PORT, () => { console.log(`Server listening on ${PORT}`); });

Me encantaría saber qué estoy haciendo mal aquí.

¡Gracias!