To improve security and reduce information leaks and spyware, HTTP (the protocol used to share most web resources) have a set of rules about cross-origin resource sharing
. For our purposes there are two broad ideas to consider here.
fetch during developmentIf you run your page using the file:// scheme, fetch and its friends are unlikely to work. Instead, you’ll need to run a local webserver.
This involves two parts:
Run a local webserver. You’ll need to do this from the command line from directory that contains your HTML file.
Pick one of the following:
With Python 3
python -m http.serverWith Python 2
python -m SimpleHTTPServerWith PHP
php -S [::1]:8080With Node.js
Install once with npm install -g httpserver.
Once installed, run
httpserver 8000 localhostUse the local server to view your files.
For example, if your file is named myfile.html, in your browser go to one of the following:
Depending on your OS and browser and which tool you used to start the server, it may be that only one of the above URLs works.
If needed, test in private/incognito mode and force-refresh
Some combinations of operating system, browser, and server may result in excessive caching. This results in edits you make to local files not being visible in the browser: the old versions of the files are still served.
For fetch, caching can be avoided by adding the {cache:"no-store"} configuration to the fetch call, as in fetch(myFileName, {cache:"no-store"}).then(/*...*/).
Opening the page in a private/incognito browser window bypasses most caching and may also assist in not caching files you’ve edited.
If the browser still caches, there is a forced reload
option that bypasses the cache; on Windows and most Linux installs this is achieved with Ctrl+F5; on MacOS Opt+R is more common. Holding Shift while pressing the reload button may also work.