No tienes acceso a esta clase

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

Problema de CORS

24/27
Recursos

Aportes 40

Preguntas 16

Ordenar por:

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

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

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

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(鈥楴ot allowed by CORS鈥))
}
}
}
app.use(cors(corsOptions));
asi si me funciona a mi

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.

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

Esto no lo habia visto todavia muy bueno 鈿

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鈥

En mi caso al principio tuve muchos problemas para que me funcionara el codigo, incluso probe instalar el paquete 鈥渉ttp-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

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

Para levantar el otro servidor se puede instalar http-server y a帽adir un script en el package.json: *"start"*: "http-server" Yo levante para la prueba el frontend.html en otro pc tambien dentro de la misma red y me salen distintos adaptadores de red: Adaptador de LAN inal谩mbrica Wi-Fi: Adaptador de Ethernet vEthernet (Default Switch): En este caso me sirvi贸 la direcci贸n IP del adaptador Ethernet