How can I resolve the error "URL scheme must be "http" or "https" for CORS request." for this code

Question

It shows below message in the console.

sandbox.js:1 Fetch API cannot load file:///C:/Users/Lizzi/Desktop/novice%20to%20ninja/todos/luigi.json. URL scheme must be "http" or "https" for CORS request

I'm new to aynchronouse programming but I have read up on CORS solutions and tried things like getting a chrome extension and disabling web security for my google chrome but it still doesn't work.

fetch('todos/luigi.json').then((response)=>{
  console.log('resolved',response);
}).catch((err)=>{
    console.log('rejected', err);
});

Solution

You need to be serving your index.html locally or have your site hosted on a live server somewhere for the Fetch API to work properly. The files need to be served using the http or https protocols.

If you just clicked on your index.html from your file explorer than your browser is grabbing those files directly from your file system. This is why the error is showing you an absolute path from the root folder on you computer.

Try installing one of these... - npm serve - Live server (an extension for Visual Studio Code if you are using that)

Or whatever server that will work with your environment.

Should work fine once you spin up a server :) happy coding!