0

Estuve leyendo sobre CORS y entiendo que son solicitudes de origen cruzado, donde el end point del API está en un dominio diferente al desde donde se solicitan recursos.

Quiero consumir el api de xkcd pero cuando hago la solicitud me retorna el ya conocido error:

Access to XMLHttpRequest at 'https://xkcd.com/info.0.json' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

He intentado de todo para lograr habilitarlo:

const options = {
url: 'https://xkcd.com/info.0.json',
method: 'GET',
headers: {
    'Access-Control-Allow-Origin':'*',
    'Access-Control-Allow-Methods': 'GET',
    'Access-Control-Allow-Headers':'*',
    'cache-control': 'no-cache'
}
}
this.$axios(options)
.then(result =>{
    console.log("Lastest: ", result.data);
    
})
const options = {        
    headers: {
        'Access-Control-Allow-Origin':'*',
        'Access-Control-Allow-Methods': 'GET',
        'Access-Control-Allow-Headers':'*',
        'cache-control': 'no-cache'
    }
}
this.$axios.get('https://xkcd.com/info.0.json',options)
.then(result =>{
    console.log("Lastest: ", result.data);
    
})

Pero nada funciona, desde Postman se consume sin problemas pero no logro hacerlo desde mi front.

Lo curioso de todo esto es que encontré que un desarrollador creó un API en Node.js que habilita los CORS y permite consumirlo consumiendo su API, por lo que entiendo que se puede hacer. El post es este Rebel with a CORS y lo logra así:

const axios = require('axios')
const { send } = require('micro')
const microCors = require('micro-cors')
const cors = microCors({ allowMethods: ['GET'] })
const DOMAIN = 'https://xkcd.com/'
const PATH = 'info.0.json'
const handler = async function(req, res) {
  let id = req.url.replace('/', '')
  const comicId = id ? `${id}/` : ''
  const path = `${DOMAIN}${comicId}${PATH}`
  const response = await axios(path)
  id = response.data.num
  let newResponse
  if (id >= 1084) {
    newResponse = {
        ...response.data,
        imgRetina: `${response.data.img.replace('.png', '')}_2x.png`,
      }
    } else {
      newResponse = {
      ...response.data,
    }
  }
  send(res, 200, newResponse)
}
module.exports = cors(handler)

Si se pudo solucionar en Node.js, ¿hay alguna forma que consumiendolo desde mi front con axios lo pueda resolver también?

Agradezco sus aportes.

1 respuesta 1

1

el API de xkcd no tiene habilitado el CORS (hasta ahora), así que la única forma sería hacer un backend que haga la petición y sirva de intermediario (proxy).

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.