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:
And no more CORS error (doesn’t quite work yet, but that’s a whole different story).