Me pregunto por qué Fetch API en javascript no llama al punto final que creé en express. Cuando inicio mi servidor y voy al punto final '/ caracteres', devuelve JSON con el formato correcto.
Aquí está mi express index.js
const app = express(); const PORT = 3000; const charactersRoute = require('./routes/characters'); //Characters Route app.use('/characters', charactersRoute) app.listen(PORT, function(err) { if(err) console.log(err); console.log(`Server is listening on port ${PORT}`) })Aquí está mi ruta de personajes
const express = require('express'); // Web Framework const https = require('https'); const router = express.Router(); const PORT = 3000; // app.listen(PORT, function(err) { // if(err) console.log(err); // console.log(`Server is listening on port ${PORT}`) // }) const api = 'https://www.breakingbadapi.com/api/characters/?limit=20'; router.get("/", function(req, res) { https.get(api, (response) => { console.log(response.statusCode); response.on('data', (d) => { const data = JSON.parse(d); res.send(data); }) // res.send("Running") }) }) module.exports = router;Aquí está mi archivo Characters.jsx donde estoy usando Fetch
import React, {useEffect, useState} from 'react'; import Card from '@mui/material/Card'; import axios from 'axios'; export default function Character() { const [data, setData] = useState(); useEffect(() => { fetch('/characters') .then(res => res.json()) .then(data => setData(data)) // console.log(data); }, []); }Cuando ejecuto mi interfaz y verifico la respuesta que recibo, devuelve mi index.html. Si busco la URL de la API, entonces devuelve correctamente el JSON en mi interfaz. Pero cuando intento obtener el punto final de la API que creé en Express, no obtengo ningún dato. ¿Alguna sugerencia?
No configuró el punto final para la función de búsqueda. No sabe qué es la API '/caracteres'. Es como decir el número de la casa pero no decir la calle, no sabes a dónde ir. Por lo tanto, debe pasar la ruta absoluta para buscar para solicitarle datos al servidor, porque el servidor es una "entidad" diferente, no es lo mismo con su interfaz. Por lo tanto, debe proporcionar la URL completa de la API. O, si usa axios, ya que veo que lo importó arriba, debe establecer axios.defaults.baseURL = <API_URL> , (o proporcionar la URL completa en la solicitud como en fetch ) y luego realizar la solicitud con la ayuda de axios, no de buscar.
Por lo tanto, su código React se verá algo así:
import React, {useEffect, useState} from 'react'; import Card from '@mui/material/Card'; import axios from 'axios'; axios.defaults.baseURL = 'http://localhost:3000'; export default function Character() { const [data, setData] = useState(); useEffect(() => { const getData = async () => { try { const {data} = await axios.get('/characters'); setData(data); } catch (err) { console.error(err); } }; getData(); }, []); } Pero le sugiero que cree un archivo diferente con todas las solicitudes de axios y allí establezca la baseUrl ; esa es una mejor práctica.
patrón de error
Este tipo de error ocurre cuando enviamos una solicitud del lado del cliente al lado del servidor usando una URL relativa ( /characters en este caso). Pero la aplicación frontend y la aplicación backend se ejecutan en 2 puertos diferentes.
Razón
Cuando usamos URL relativas, la URL se concatenará con el host actual (el host frontend, no el backend). Por lo general, recibimos un error 404 porque el recurso no existe.
Ejemplo
Aplicación Backend Express ejecutándose en el puerto 5000. Aplicación React ejecutándose en el puerto 3000 para desarrollo. En la aplicación React, si enviamos una solicitud a /users , la URL completa es http://localhost:3000/users . La solicitud va a la aplicación React, no al servidor backend. Y no recibimos la salida deseada.
Acción
Debe usar una URL absoluta, algo como: http://localhost:5000/users para enviar la solicitud a su aplicación de back-end. Considere guardar la parte del host ( http://localhost:5000 ) en una variable global para usarla en varios lugares en su código de interfaz. Cuando tiene diferentes entornos para el backend (DEV/STAGING/PRODUCCIÓN), puede cambiar el host del backend en un solo lugar.