Get the image of a Json


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: : 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()'GET', url) 
      req.onload = function () {

        if (req.status === 200) { 
        } else {
          reject(req.status, req.statusText) 
      req.onerror = function () { 
        reject("erro de conexão")



  const catchImage = document.getElementById("body") 


  const url = getData("Access-Control-Allow-Origin:").then(function(response)
    const jsonResponse =JSON.parse(response.images.url)
    catchImage.innerHTML = ""
    for (const url of jsonResponse["url"]) {
        catchImage.innerHTML = catchImage.innerHTML + "<img src='" + images.url +  "' />"
  }, function(error) { console.log(error)}) 


You can use one of the extensions for chrome (for development):

Allow-Control-Allow-Origin: *


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.

Scroll to Top