In this post, I wrote about how you might draw a graph using the HTML canvas; my next step was to make that more efficient; however, upon trying to import a Javascript module into my script:
import animatedGraphics from './animatedGraphics';
I started getting this error:
Access to script at ‘file:///C:/repos/webanimations/animated-columns-optimised/columns.js’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
After a bit of digging, I uncovered a feature of ES6 that prevents opening this directly in a browser.
Hosting the site locally
The issue is caused because the file is being opened directly; so there seemed to be a couple of ways around this: one is to disable the security in Chrome, although try as I might, I couldn’t manage to get it to give up the ghost: I tried various combinations around the —disable-web-security flag of Chrome.
The second option is to host the site locally. For a brief moment I considered using something like IIS Express; but fortunately, I came across this tool that hosts a site locally for you.
It can be installed as an npm package:
npm install --global http-server
Once installed, you just navigate to the relevant directory, and type http-server:
C:\\repos\\webanimations\\animated-columns-optimised>http-server
Starting up http-server, serving ./
Available on:
http://192.168.1.79:8080
http://127.0.0.1:8080
http://172.17.230.225:8080
Hit CTRL-C to stop the server
You can then navigate to your specific page; for example:
http://127.0.0.1:8080/columns
And no more CORS error (doesn’t quite work yet, but that’s a whole different story).