No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

4D
20H
0M
55S

Problema de CORS

24/27
Recursos

Aportes 32

Preguntas 13

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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.

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

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);
})()

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));

Este curso es fant谩stico.

No sabia lo de la whitelist!!!

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));

驴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 me solucion贸 tantos problemas que he tenido en mi vida profesional 馃槃馃槃馃槃

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

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 馃槃

Esto no lo habia visto todavia muy bueno 鈿

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.

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

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.