Problema de CORS

Ameeeeeeeeee esta claseeeeeeeee, creo que esto es bastante util para muchisimas cosas.
Curso 10/10

si colocas el : app.use(cors(options));
antes de la línea : routerApi(app);
bloquea todo, hasta la petición desde el localhost:3000/api/v1/products

como el cors es un midleware se debe colocar después de routerApi(app), y entonces ya te resuelve la petición localhost:3000/api/v1/products

pero aun tengo el problema con la petición desde el frontend, y he hecho la prueba utilizando el live serve de vs-code con puerto 5500 y levantando un http-server en puerto 8080. Colocando localhost o 127.0.0.1 y aun no me autoriza.

Será que se debe de definir el permiso para la petición GET, o algún permiso para headers?

A mi las peticiones de ésta clase no me han salido y tengo el mismo código que el profesor.

const express = require('express');
const routerApi = require('./routes/index');
const app = express();
const port = 3000;
const { logErrors, errorHandler, boomErrorHandler } = require('./middlewares/errorHandler');
const cors = require('cors');

app.use(express.json());

const whitelist = // son los mismos (si pego los links platzi me impide comentar)
const options = {
  origin: (origin, callback) => {
    if (whitelist.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error('no permitido'), false);
    }
  }
}

app.use(cors(options));

app.get('/', (req, res) => {
  res.send('Hola mi server en Express')
})

app.get('/nueva-ruta', (req, res) => {
  res.send('Hola soy una nueva ruta')
})

app.get('/home', (req, res) => {
  res.send('Aquí encontrarás nuestra página principal')
})

routerApi(app);

app.use(logErrors);
app.use(boomErrorHandler);
app.use(errorHandler);

app.listen(port, () => {
  console.log('My port: ' + port);
})

Hola!
Yo también tuve problemas enviando la solicitud desde el frontend.html pero así es como lo solucioné…

1. Declaré en mi whitelist el puerto que usa VS Live Server

const whitelist = ["h ttp://127.0.0.1:5500", "h ttps:// myapp.com"];

1. Ordené mis middleware en mi archivo Index.js en este orden:

• • i) app.use(cors(options))
• • ii) routerApi(app);
• • iii) Middlewares de error
• • iv) app.listen(port, () =>…

1. Mi archivo frontend.html esta en la carpeta principal, al nivel del index.js y del package.json (no es necesario mover este archivo)

2. Ejecuté Live Server en el frontend.html y me fije que el navegador muestre exactamente el mismo origen que yo había declarado (puede ser 127.0.0.1:5500 o bien localhost:5500, pero debe ser exactamente el mismo!!)

3. Si no sale a la primera, recarga el navegador!! (Abre la consola del inspector)

Les dejo mi index.js:

const express = require('express');
const cors = require('cors');

const routerApi = require('./Routers');//el archivo index.js se busca en automático
const { logErrors, errorHandler, boomErrorHandler } = require('./middlewares/error.handler');

const app = express();
const port = 3000;

app.use(express.json());//este es un Middleware

const whitelist = ["h ttp:// 127.0.0.1:5500", "h ttps:// myapp.com"];
const options = {
  origin: (origin, callback) => {
    if (whitelist.includes(origin)) {
      callback( null, true);
    } else {
      callback(new Error ('No tiene permiso para acceder'));
    }
  }
}
app.use(cors(options));

app.get('/', (req, res) => {
  res.send('Hola, este es mi primer servidor!')
});


routerApi(app); // Este es el index.js de routing con express como atributo


app.use(logErrors);//Es muy importante poner este primero xq lleva el next
app.use(boomErrorHandler);
app.use(errorHandler);

app.listen(port, () => {
  console.log(`Estamos escuchando en el puerto h ttp://localhost:${port}`)
})

problema de CORS
yo lo hice con el puerto predeterminado de live server :5500 en VScode , con el mismo código que el profesor enseña.

A mí no me funcionaba porque el archivo frontend.html lo tenia en la misma carpeta my-store. No sé si eso tenga que ver pero cambiarlo fuera de ahí solucionó mi problema. La primera opción que me había funcionado era esta:

Pero haciendo lo del cambio de ubicación del archivo, funcionó con el código de esta clase.

podemos ponerlo a prueba evitando crear el archivo html, abriendo una nueva pestaña con la url

about:blank

abrimos la consola y pegamos la siguiente líneas que contiene la función que hace la petición a la API

(async ()=> {
  const response = await fetch('http://localhost:3000/api/v1/products');
  const data = await response.json();
  console.log(data);
})()

Este video no es de aqui, debe estar en el otro curso el de node y postgresql

Esta clase es de otro cursoo 😦

Solo se debe colocar en orden para quno bloquear el proceso
1* routerApi
2* app.use(cors(option))
y listo

Esta clase me solucionó tantos problemas que he tenido en mi vida profesional 😄😄😄

También tuve el Errror en la que no podía acceder desde el frontend, pues en mi caso fue por el slash “/” que había puesto al final, mientras que el origin venia sin el, sacando eso se resolvió mi problema.

Solucion de cors:

const cors = require('cors');
app.use(cors());

Si solo queremos hacer CORS a los endpoints de nuestra API, bajamos app.use(cors()) justo antes de que empiecen nuestras rutas hacia la API.
Habilitando cors de esa manera en index, hacepta cualquier origen.
Para habilitar el ingreso de host especificos, lo hacemos de esta manera:

const whitelist= ['localhost:3000', 'pagina.co'];
const optiones = {
  origin: (origin, callback) => {
    if (whitelist.includes(origin)) {
      callback(null, true)
    } else {
      callback(new Error('no permitido'))
    }
  }
}
app.use(cors(optiones));

Desmenuzamos
creamos una Whitelist (donde estarán los hosts o los sitios que queremos que ingresen)

const whitelist=['localhost:3000', 'pagina.co'];

crearemos una función que tendrá un origen que recibe dos parametros (asi es como funciona la librería de CORS), un origen y un callback. Si el origen esta en nuestro whitelist, lo dejamos pasar (true), en caso contrario devolvemos un error.

const optiones = {
  origin: (origin, callback) => {
    if (whitelist.includes(origin)) {
      callback(null, true)
    } else {
      callback(new Error('no permitido'))
    }
  }
}
app.use(cors(optiones));

Tenía dudas sobre la línea callback(null, true) ya que no me había quedado muy claro, pero leyendo la documentación entendí que:
.
Básicamente en las opciones, en el origin, se pasa una función con dos parámetros, el origen de la solicitud, y un callback. La función va a buscar que el origen se encuentre dentro del whitelist y si lo está, ejecuta el callback(null, true) (aquí era mi duda).
.
Este callback recibe dos parámetros: error y <valor no funcional de las opciones del origen>.
.
😮 ¿Qué son los valores no funcionales de las opciones del origen? Bueno, al valor de origen se le puede pasar varios tipos de valores, en la imagen se expresan:

.
Mediante ese segundo parámetro se envía un valor de esta lista, que no sea la función. En nuestro caso, enviamos true, por lo cual cae en el primer caso.
.
Espero esta información le ayude alguien 😄

Mantener el estándar de errores, devolver el error con formato boom:

// use middleware to control the ips that access
const whitelist = ['*'];
const options = {
  origin: (origin, callback) => {
    if (whitelist.includes(origin)) {
      callback(null, true);
    } else {
      callback(boom.unauthorized());
    }
  }
}
app.use(cors(options));

Para los que les generó problemas de que no les aceptaba el server alterno del frontend para hacer la petición, acá les dejo la solución, despues de tanto buscar y leer y probar, de esta manera ya funciona:

app.use(express.json());

const whitelist = ['Aca va tu puerto del frontend como aparece'];
const options = {
  origin: (origin, callback) => {
    if(whitelist.includes(origin) || !origin){
      callback(null, true);
    }else{
      callback(new Error('Not allowed by CORS'));
    }
  }
}
app.use(cors(options));

Espero que de esta manera les solucione sus inconvenientes…

Hola Comunidad Platzi, en mis apuntes en Notion, incluí una serie de pasos sencilla, para crear un archivo html dentro de una carpeta client dentro del mismo Backend, para poder hacer la prueba desde una un puerto diferente usando htttp-server:
https://bg99astro.notion.site/Deploy-de-una-Express-App-82957168813642aa95c1518a8aed5288

como lo tiene el profe a mi no me funciono, buscando en la documentacion de npm cors ellos dan otra manera de hacerlo en ve de poner el metodo includes() lo hacen con el indexOf asi.

const whitelist = [‘https://localhost:5500’, ‘https://example2.com’]
const corsOptions = {
origin: function (origin, callback) {
if (whitelist.indexOf(origin) !== -1) {
callback(null, true)
} else {
callback(new Error(‘Not allowed by CORS’))
}
}
}
app.use(cors(corsOptions));
asi si me funciona a mi

De verdad que es genial ver como se hace codigo de manera profesional. De verdad no habia visto antes una manera de codear así. Excelente curso.

Este curso es fantástico.

No sabia lo de la whitelist!!!

¿Cómo resolver el problema ERR_TOO_MANY_REDIRECTS?
si tienes este problema en el que estaba incurriendo desde un buen rato, te recomendaría esta lectura para solucionarlo https://rockcontent.com/blog/err_too_many_redirects/ , pero en resumidas cuenta solo fuerza la carga de la página, eso se hace con ubicar el puntero en la flecha de recargar pagina y le das clic derecho hasta que te aparescan las tres opciones ejemplo --> volver a cargar, cargar de manera forzada y la ultima es cargar de manera forzada y vaciar cache y listo

Esta clase fue espectacular mejor dicho el curso en General
gracia profe Nicolas por todo lo que nos compartes he aprendido mucho

Esto no lo habia visto todavia muy bueno ⚡

En mi caso al principio tuve muchos problemas para que me funcionara el codigo, incluso probe instalar el paquete “http-server” de npm siguiendo un comentario de un compañero pero aun asi me generaba error.

Pero despues de intentar y buscar soluciones al final me quedó el codigo asi que me funcionó correctamente:

const express = require('express');
const cors = require('cors');
const routerApi = require('./routes');
const { logErrors, errorHandler, boomErrorHandler } = require('./middlewares/error.handler');

const app = express();
const port = 5000;


const whiteList = [  '127.0.0.1:8080', 'localhost:5000', 'https://myapp.com'];
const options = {
  origin: (origin, callback) => {
    if (whiteList.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error('no permitido'));
    }
  }
}
app.use(cors(options));

//Middleware (Esta linea de código la ubique despues del cors y segun el codigo del profe iba arriba)
app.use(express.json());

app.get("/", (req, res)=> {
  res.send("Hola, mi primer servidor en express")
})

routerApi(app);

// Middleware de Error
// Utilizamos los middleware. Siempre deben ir después del routing:
app.use(logErrors);
app.use(boomErrorHandler);
app.use(errorHandler);

app.listen(port, ()=> {
  console.log("Mi puerto es " + port);
})

Abre un cliente en tu mismo proyecto
Agrega un nuevo servidor en tu mismo archivo

const clientApp = express();
const clientPort = 4000;
clientApp.use(express.static("public"))
clientApp.listen( clientPort, () => {
  console.info( clientPort)
})

Crea la carpeta public y un archivo index.html dentro

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>Prueba de api</h1>
  <button type="button" onclick="getData()">Get Data</button>
  <div id="result"></div>
  <script>
    const result = document.getElementById("result")
    const getData = () => fetch( "...")
      .then( response => response.json())
      .then( data => result.innerHTML = data.map( ({name}) => `<div>${name}</div>`).join(""))
      .catch( error => result.innerHTML = `<p>${error}</p>`)
  </script>
</body>
</html>

Ahora tendras tu server en el puerto 3000 y tu cliente en el puerto 4000
No olvides agregar el puerto a la whitelist

Importante que aunque localhost y
127.0.0.1 lleven al mismo sitio, el backend no los reconoce como iguales y hay que introducirlos a ambos en la whiteList

Agrege este pdacito de codigo del repo oficial. para trabajarlo asincronamente
slds desde Lima Perú

var allowlist = ['https://myapp.com']
var corsOptionsDelegate = function (req, callback) {
  var corsOptions;
  if (allowlist.indexOf(req.header('Origin')) !== -1) {
    corsOptions = { origin: true } // reflect (enable) the requested origin in the CORS response
  } else {
    corsOptions = { origin: false } // disable CORS for this request
  }
  callback(null, corsOptions) // callback expects two parameters: error and options
}


app.use(cors(corsOptionsDelegate));

Tambien se puede hacer lo siguiente

<code> 

const whitelist = ['origin1','origin2', 'https://myapp.co'];

app.use(cors({
  origin: whitelist
}));

Excelente explicación sobre CORS, una forma de proteger las peticiones a nuestra API.

Para los que tuvieron problemas corriendo el archivo front les recomiendo seguir los pasos de
Tomás André Peñaloza Avilés

El mejor profesor del mundo, por favor, un curso de cunsumo de api rest con este profesor

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    (async () => {
      const response = await fetch('ruta');
      const data = await response.json();
      console.log(data);
    })();
  </script>
</body>
</html>

Por fin pude entender la parte del acceso CORS, esta clase junto con la que se explicaron los http errors con cats ha sido de lo que más me ha gustado.

Les comparto un artículo sobre la configuración de los CORS en express

para poder ver no se olviden de estar corriendo el servidor de desarrollo y se puede abrir con live server de VS code.

npm run dev

Esta es otra clase que creo que pertenece a otro curso, particularmente porque la clase no tiene relacion con el titulo de la misma

Aun continua la clase incorrecta 😐

En la Lección 23, el video no corresponde con su descripción de problemas de CORS