Handling CORS errors
A practical guide to running WebGL locally.

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.

1 fetch during development

If 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. But many local webservers encourage browsers to cache files, meaning that edits you make to files will seem not to have happened.

We have multiple possible solutions, using different local server tools.

Python local server

Make a file webserver.py with the following contents:

import http.server
import socketserver

PORT = 8080

class NoCacheHTTPRequestHandler(http.server.SimpleHTTPRequestHandler):
    def end_headers(self):
        # Send headers to prevent the browser from caching anything
        self.send_header("Cache-Control", "no-cache, no-store, must-revalidate")
        self.send_header("Pragma", "no-cache")
        self.send_header("Expires", "0")
        super().end_headers()

# Allow restarting the server immediately without "Address already in use" errors
socketserver.TCPServer.allow_reuse_address = True

with socketserver.TCPServer(("", PORT), NoCacheHTTPRequestHandler) as httpd:
    print(self_address := f"Server running at http://localhost:{PORT}/")
    try:
        httpd.serve_forever()
    except KeyboardInterrupt:
        print("\nServer stopped.")

Run python webserver.py (or python3 or py3 or whatever your Python executable is called) from the directory containing your HTML file, and then open http://localhost:8080

Node local server

Run npx http-server -c-1 from the directory containing your HTML file, and then open http://localhost:8080.

Node local server with hot reloading

Run npx live-server from the directory containing your HTML file, and then open http://localhost:8080.

This inserts JavaScript into your HTML files to automatically reload the page when a file is edited. That can be convenient, but can also be confusing to debug if you try to trace everything the page is doing.

VS Code extension

Install the Live server extension by Ritwick Dey in VS Code and use its Go Live button. This inserts JavaScript into your HTML files to automatically reload the page when a file is edited. That can be convenient, but can also be confusing to debug if you try to trace everything the page is doing.

Browser developer tools

Run any local server you know how to run. To bypass caching,

  1. run your code with your browser’s developer tools open (F12)
  2. in those tools’ Networks tab check the Disable Cache button
Reload and fetch without caching

Run any local server you know how to run. To bypass caching,

2 Servers might not share images

Servers can be configured to refuse JavaScript-based requests to load files. For example, the images on the https://illinois.edu homepage are set up this way; if you try to load them as a texture map of the like you’ll get a CORS error.

Because this is a configuration setting of the server, you can’t directly bypass it. Instead, you’ll have to work around it, e.g. by loading the image in the HTML (instead of JavaScript) of your page or downloading a local copy of the image.