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!
Puede modificar la URL de su API de solicitud de recuperación para proporcionar el nombre de host completo ya que
fetch('http://localhost:3000/api/')O puede usar un middleware de proxy de terceros. vea esta publicación https://medium.com/bb-tutorials-and-thoughts/react-how-to-proxy-to-backend-server-5588a9e0347
La configuración de "proxy" descrita en la documentación debe establecerse en el paquete del servidor.json , no en el del cliente. Esto se debe a que la forma en que funciona el proxy es que el servidor acepta la solicitud entrante (en el puerto 3000) y luego la envía al puerto 3001 en su nombre.
El cliente no sabe que está siendo proxy.
Bit relevante de la documentación, con énfasis agregado:
Para indicarle al servidor de desarrollo que envíe por proxy cualquier solicitud desconocida a su servidor API en desarrollo, agregue un campo de proxy a su paquete.json...