Question:
Good Morning! I'm new to javascript and I'm trying to put a JSON image from the bing site and put it on my body but I'm not getting the following error returned:
Failed to load access-control-allow-origin: https://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=pt-BR : Cross origin requests are only supported for protocol schemes: http, data , chrome, chrome-extension, https. (anonymous) @test.html:30 test.html:35 connection error
Is it the first time that api consumption can help me please? To get only the image, do I need to create a developer key? follow my code:
function getData(url) {
return new Promise(function(resolve, reject){
const req = new XMLHttpRequest()
req.open('GET', url)
req.onload = function () {
if (req.status === 200) {
resolve(req.response)
} else {
reject(req.status, req.statusText)
}
}
req.onerror = function () {
reject("erro de conexão")
}
req.send()
})
}
const catchImage = document.getElementById("body")
getData
const url = getData("Access-Control-Allow-Origin: https://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=pt-BR").then(function(response)
{
const jsonResponse =JSON.parse(response.images.url)
console.log(response)
catchImage.innerHTML = ""
for (const url of jsonResponse["url"]) {
catchImage.innerHTML = catchImage.innerHTML + "<img src='" + images.url + "' />"
console.log(url)
}
}, function(error) { console.log(error)})
Answer:
You can use one of the extensions for chrome (for development):
Allow-Control-Allow-Origin: *
COLORS Toggle
These extensions disable chrome's security regarding communication from different hosts without setting authorization in the header (as done by the header() function).
The one in your example doesn't have external access, that is, your front-end that consumes the API must be on the same host (IP + port) of the API, more like the api doesn't and then it won't work.