Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Problema de CORS

23/25
Recursos

Aportes 22

Preguntas 11

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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);
})

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.

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}`)
})

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

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.

Esta clase es de otro cursoo 😦

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 ⚡

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.

No sabia lo de la whitelist!!!

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

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

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

Este curso es fantástico.

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

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

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.