22

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);
});
Gayan S. Muthukumarana
  • 902
  • 1
  • 11
  • 28
Elizabeth Essien
  • 233
  • 1
  • 2
  • 7
  • Have you tried with a full url in fetch? – Adil Liaqat Sep 27 '19 at 05:21
  • 1
    *“disabling web secutity for my google chrome”* Don’t do that, it opens up a huge risk if you do anything else in the browser. Anyway: you can’t make Fetch/XHR requests to other local from a local file, so you’ll need to start up a local server somehow, maybe with [Python](https://www.python.org/) (`python -m http.server`) or [XAMPP](https://sourceforge.net/projects/xampp/), for example. – Ry- Sep 27 '19 at 05:21
  • how? make sure the *url scheme* is either `http` or `https` - the answer is in the error – Jaromanda X Sep 27 '19 at 05:26
  • As long as you are just playing a bit with fetch you can temporarily disable CORS. Have a look at the dupe to see how. However always make sure to reenable it (restart the browser) after testing. On the long term, hosting a small testing server (either locally or remote) might be a good idea. – Jonas Wilms Sep 27 '19 at 05:29
  • it works with a full url. – Elizabeth Essien Sep 27 '19 at 05:41
  • [You can do it without disabling security outright](https://stackoverflow.com/a/59925724/2518317) (but you do need to enable `file://` requests) – Hashbrown Jan 27 '20 at 05:56

1 Answers1

25

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!

Nick Sugar
  • 379
  • 3
  • 5
  • 2
    [You dont need to spin up a server](https://stackoverflow.com/a/59925724/2518317) if you've enabled `file://` requests – Hashbrown Jan 27 '20 at 05:56
  • 2
    @Hashbrown how to do that? – The Doctor Mar 29 '20 at 07:40
  • 2
    @Hashbrown how to enable the file:// request? – Ying Style Apr 08 '20 at 21:03
  • 2
    @YingStyle The Answer linked by Hashbrown explains it. Fetch doesn't support `file://` on Chrome, but he posted a workaround because XMLHttpRequest works (if you --allow-file-access-from-files). BTW: Firefox allows `file://` with fetch if you set `privacy.file_unique_origin=false` in `about:config` – Mathias Jun 05 '20 at 10:05
  • 4
    I use liveserver in visual studio code. And it works! You need to install LiveServer extension and then right click your HTML file to run visit the page like localhost:5500 – heinels Nov 14 '20 at 01:26