Serving Static Sites for Development Using 'http-server'

Ever come across an error like this while developing a static site on your local machine?

XMLHttpRequest cannot load file://path/to/file. Received an invalid response. Origin ‘null’ is therefore not allowed access.

This error is due to the CORS policy implemented by many browers (I got this message using Chrome Dev Tools), which is there for your protection. You may see this if you are trying to place an AJAX request to a local file, say loading data from a .txt or .csv file instead of messily including this in a local array or div in your JavaScript / HTML respectively.

The error will go away once you deploy your site to a real server and files are served over HTTP, and thankfully you can replicate that behavior on your local machine! Enter the npm library ‘http-server’:

First install the package globally on your machine

$ npm install -g http-server

Then navigate to your project folder that includes index.html at the top level

$ cd /path/to/myApp

Then start the server

myApp $ http-server

View in your browser

http://localhost:8080

And you’re done!

Show Comments