0

Estoy aprendiendo node.js e hice un servidor que recibe una petición get, pero es bloqueada por Cors policy. Estoy trabajando con express y axios. Agredezco mucho su ayuda.

Agrego mi código a continuación:

index.html

<!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 src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        const puerto = 5555
        document.addEventListener('DOMContentLoaded', getData)
        async function getData() {
            let res = await axios.get(`http://localhost:${puerto}/jugadores`)
            json = await res.data;
            console.log(json)
        }
    </script>
</body>
</html>
servidor.js

const express = require('express')
const { jugadores } = require('./base-datos')
const app = express()

app.get('/jugadores',(req, res)=>{
    res.send(jugadores)
})
puerto = 5555
app.listen(puerto, () => {
    console.log(`Puerto ${puerto}. Escuchando ...`)
});
base-datos.js

let jugadores = [
    {
        "id": 1,
        "nombre": "Jugador1"

    },
    {
        "id": 2,
        "nombre": "Jugador2"

    }

]

module.exports.jugadores = jugadores

Y estos son los errores que me marca en consola:

Access to XMLHttpRequest at 'http://localhost:5555/jugadores' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Failed to load resource: net::ERR_FAILED

Uncaught (in promise) ocode: "ERR_NETWORK"config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}message: "Network Error"name: "AxiosError"request: XMLHttpRequest {data: undefined, onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, …}response: XMLHttpRequest {data: undefined, onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, …}[[Prototype]]: Error

2
  • Lectura sugerida: es.stackoverflow.com/a/220984/822 Saludos.
    – fredyfx
    Commented el 19 ago. 2022 a las 19:17
  • Parece que estás intentando hacer la peticion al servidor desde un archivo abierto localmente. Debes agregar la línea res.header("Access-Control-Allow-Origin", "*"); antes de devolver los jugadores.
    – Pipe
    Commented el 19 ago. 2022 a las 21:46

1 respuesta 1

1

A lo que veo, tu index.html y tu servidor.js no están conectados de ninguna manera. Es decir, tu servidor no está, literalmente, sirviendo el index.html entonces no lo entiende como suyo por ende bloquea la petición.

Hay varias maneras de resolver este issue:

  1. delegándole al servidor que sirva el index.html es decir, que solo se pueda acceder a ese archivo por medio del servidor.
  2. setear manualmente el header:Access-Control-Allow-Origin en el response.
  3. que le digas a tu servidor explícitamente que acepte los requests de cualquier origen o darle una lista detallada de origenes permitidos.

Solución uno.

Tendrás que servir index.html desde servidor.js:

const { jugadores } = require('./base-datos')
const app = express()

// esta ruta es nueva 👇 y sirve el index.html
app.get('/', (req, res) => {
  return res.sendFile(__dirname + '/index.html')
})

app.get('/jugadores', (req, res) => {
  res.json(jugadores)
})

app.listen(5555, () => console.log('Server started on port 5555'))

Ahora debes visitar http://localhost:5555/ y al abrir la consola verás que tus jugadores se están trayendo de la base de datos.

Por qué funciona?

Porque el servidor entiende que la petición se está originando en el mismo origen es decir http://localhost:5555.

Solución dos.

Agrega el header:Access-Control-Allow-Origin manualmente:

const express = require('express')
const { jugadores } = require('./base-datos')
const app = express()

app.get('/jugadores',(req, res)=>{
    // esta línea permite a esta ruta en específico ser fetcheada desde cualquier origen
    res.header('Access-Control-Allow-Origin', '*')
    res.send(jugadores)
})
puerto = 5555
app.listen(puerto, () => {
    console.log(`Puerto ${puerto}. Escuchando ...`)
});

Solución tres.

Agrega cors a tu servidor.

const express = require('express')
const cors = require('cors')
const { jugadores } = require('./base-datos')
const app = express()

// con este línea 👇 tu servidor acepta requests de cualquier origen
app.use(cors())

app.get('/jugadores',(req, res)=>{
    res.send(jugadores)
})
puerto = 5555
app.listen(puerto, () => {
    console.log(`Puerto ${puerto}. Escuchando ...`)
});

Por qué funciona?

El método .use() ejecuta middlewares (un middleware es simplemente una función que puede modificar el request y el response de una petición antes que dicha petición sea ejecutada en la ruta deseada). En este caso, el middleware que estamos usando es cors() que modifica el objeto response del servidor que permite el accesso al servidor por medio del header:Access-Control-Allow-Origin.

Estas son algunas lecturas que te podrían interesar para entender más sobre el tema:

2
  • @AmilcharMunoz Tu respuesta me fue muy útil en un principio, pero ahora veo que mucha veces funciona aun sin agregar ni una de las soluciones que me diste. Y en ocasiones tampoco funcionan las soluciones dadas. Por qué esta pasando esto? Agradecería mucho tu ayuda!
    – ZCH
    Commented el 25 ago. 2022 a las 6:05
  • @ZCH sin ver el código, no podría decirte qué está mal. Crea otra pregunta donde expliques tu nueva situación.
    – jonoise
    Commented el 25 ago. 2022 a las 16:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.