"cross origin requests are only supported for HTTP." error when loading a local file

Local Web Server: Installation and Usage

The simplest and most effective fix for cross-origin issues is to run a local HTTP server. If npm isn't your cup of tea, below are some worthy alternatives:

• Python (2.x) SimpleHTTPServer: Run python -m SimpleHTTPServer. It's so simple.
• Python (3.x) http.server: Run python3 -m http.server in your directory. Simpler still.
• Live Server in Visual Studio Code: An extension that's a beast for serving up hot, fresh files.

Remember, the key lies in serving files via the HTTP protocol rather than file://, considering the latter faces severe security restrictions in browsers like Chrome and Firefox.

Local Server: Common Challenges and Fixes

Cache Bypass

http-server or other similar tools can present caching problems. The -c-1 flag disables caching:

http-server -c-1 /path/to/files   // Launches server with cache off. Freshness guaranteed!


URLs: Structure and Protocols

To avoid 404 errors or additional security issues, make sure your URLs utilize the proper protocol (http://) and bear the correct file path. Additionally, standard port numbers for local servers are 8000, 8080, 9000, etc.

File Organization

Pro Tip: Keep your 3D models or other assets in the same directory as your HTML files. This ensures they are easily reached by your server.

Cross-Origin Policy and JSONP

Understanding cross-origin intricacies and practicing JSONP for loading data from various domains will make troublesome cases easier to crack. Do note that JSONP suits GET requests and requires the server to be JSONP-ready.

Beyond Basics

Port Specs and Chrome Flags

If Python's server floats your boat, specify a port in this way:

python3 -m http.server 9000  // Serves files on port 9000. Because 9000 > 8000, right?


For Chrome, for development purposes, you could run with the --allow-file-access-from-files flag (Not advised for everyday browsing).

Chrome Extensions and CORS

The Web Server for Chrome extension eases local server setup like Sunday morning, proffering a user-friendly interface for specifying folder paths.

Meanwhile, the cors-anywhere npm package can expedite CORS solutions. It sets up a proxy that adds necessary CORS headers.

External Hosting: Alternative Solutions

When local server setups seem daunting, consider uploading your required files to an HTTP server or a hosting service. Free hosting solutions such as GitHub Pages and Netlify are great and provide your files via HTTP.