I am currently have a Javascript file that fetches JSON data (specifically, the SECOND JSON object and appends its data to the the

tag with the id "content").

I have been getting this error message: from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome-untrusted, https, edge. How do I fix this to make sure that the server hosting the JSON file includes the appropriate CORS headers in its responses?

JSON:

[ { "key1": "value", "key2": "value", "key3": "value.", "key4": { "image": [ "images.jpg" ] } }, { // ***this is what I added to the HTML*** "common_name": "Dolphin", "scientific_name": "Delphinus Linnaeus", "description": "description here..", "images": { "image": [ "dolphin1.jpg", "dolphin2.jpg", "dolphin3.jpg", "dolphin4.jpg" ] } } ]

Javascript:

document.addEventListener("DOMContentLoaded", load);

function createZooland(zoolandData) {

let animalData = data[1]; let contentDiv = document.getElementById("content");

let h2 = document.createElement("h2"); h2.innerHTML = animalData.common_name; contentDiv.appendChild(h2);

let h3 = document.createElement("h3"); h3.innerHTML = animalData.scientific_name; contentDiv.appendChild(h3);

let blockquote = document.createElement("blockquote"); blockquote.innerHTML = animalData.description; contentDiv.appendChild(blockquote);

for(let i = 0; i < images.image.length; i++){ let img = document.createElement("img"); img.src = "images/"; //+ animalData.images.image[i]; contentDiv.appendChild(img); } } // i < animalData.images.image.length;

function load() { fetch("zooland.json") .then(function(result){ return result.json(); }) .then(function(data){ createZooland(data); }); }

HTML:

JSON Zooland

JSON Manipulation

Virtual Zoo

Glutton Media - Copywrong 2020