Question: 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
I am currently have a Javascript file that fetches JSON data (specifically, the SECOND JSON object and appends its data to the the 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: There are 3 Steps involved in it Get step-by-step solutions from verified subject matter expertsJSON Zooland
JSON Manipulation
Virtual Zoo
Step by Step Solution
Study Help