simonmadine | 23 March, 2012 08:00
Often, when hacking around with various APIs, you'll find yourself needing to load in some data via AJAX or load a script from another domain. Depending on which technique or library you're using at the time, this can cause a security error. This error is due to the fact that the file you're hacking away at comes direct from the local file system (file://) while the data or external library you're loading comes from somewhere out there on the internet (http://). Browsers, quite sensibly, prevent local JS files from pulling in remote ones to avoid all manner of potential security issues. If you've ever seen an error in the console about access-control-allow-origin or 'Cross-origin requests are only supported for HTTP', you now know why.
The simplest way to avoid this is to access your files via a web server running on your own machine and there are many ways to do this - XAMPP, node.js, etc. Apache is even built into OS X and can be enabled under System Preferences > Sharing > Web Sharing. For the absolute simplest method on OS X, however, I find nothing can beat python. Just open Terminal, cd to the directory you're developing in and run:
python -m SimpleHTTPServer
This starts the Python interpreter with the SimpleHTTPServer module - an extremely simple web server - running on port 8000 by default. You can now access your project at:
http://localhost:8000/filename.html
The benefit of this technique over using OS X's built-in Apache Server is that you don't need to worry about moving files around or creating local host aliases or anything like that.
A cross-platform alternative to this is Mongoose which functions in much the same way but also runs on Windows and Linux as well as OS X.
Learn more about HTTP access control and cross-origin errors on the MDN site.