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.