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.server
With Python 2
python -m SimpleHTTPServer
With PHP
php -S [::1]:8080
With Node.js
Install once with npm install -g httpserver
.
Once installed, run
httpserver 8000 localhost
Use 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.