Ojito 👁 porque hasta este punto la API estará desplegada por un lado (Heroku) y el Front por otro (Netlify)… Y en ningún momento se configuró CORS en la API (Cross-origin resource sharing - Uso compartido de recursos de origen cruzado), por lo que es muy probable que cuando su Front haga algún request a la API no pueda traer nada de info y en la consola se muestre un error de CORS.
Para solucionarlo, por ahora, pueden habilitar CORS para cualquier dominio así (recuerden, desde la API que creamos en Express):
$ npm install cors
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
... // el código de las rutas normal
Ahora, no es muy buena idea dejarlo abierto a todos los dominios… En la próxima clase compraremos un dominio que lleve al Frontend de nuestra aplicación; cuando lo tengan listo, pueden limitar la configuración de CORS al dominio de su Front 😃 así:
const express = require('express');
const cors = require('cors');
const app = express();
const corsOptions = {
origin: 'https://laUrlDelFront.com',
};
app.use(cors(corsOptions));
... // el código de las rutas normal
¡Saludos! 🚀
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?