Today I wanted to
go through some jQuery samples - that
were stored locally on my computer. I opened them with Internet explorer and
the ActiveX warning popups were getting really annoying to try out these
samples from my disk.
I wanted to just
open up the local system HTML files that were showing off the jQuery examples
without that pesky ActiveX warnings from IE.
Then I remembered that I had a copy of the Chrome browser on my machine
- and found that you can drag and drop
files onto the Chrome browser to view
those files (No file> open menu-item needed).
opening the file in Chrome - the jQuery did not seem to want to function - and yet,
no error messages in the UI was displaying. So - in Chrome browser, the Ctrl+Shift+I
keystrokes will open up the developer tools - and then clicking that non-functioning link reveals there in the console the error message
about "Access-Control-Allow-Origin" not being set in the headers. This error was a new one
to me - apparently one of the HTML5 changes.
The Access-Control-Allow-Origin - is supposed to be a header that is sent back to
the browser from a server that allows it to access files that are not from the
same domain. This is based on the Cross
Origin Resource Sharing (CORS) spec from the W3.org.
HTML5 is not just one specification - it is a collection of specifications. This is one that I was not really aware of until hitting this error.
When you realize
that data for mobile phones, tablets and browsers, that get applications written with HTML5 as
the platform in mind, this header and techniques to use it - become very important for
developers to be aware of today.
The HTML5Rocks website has a very nice
tutorial that explores how developers need to be looking at the usage of CORS
in the ability to get cross domain access of data. There is an excellent link in the tutorial, to the CanIUse.com site, that specifically shows what browsers support the HTML5 CORS spec today; the CanIUse.com is a great site for seeing what HTML5 specifications are enabled in todays modern browsers.
That research was all the result of seeing an error in the Chrome Browser. The situation that brought up the error however is a specific situation, that is using the browser without a server - so you would not have the headers being sent when opening a local file.
In researching how to get around it, I found the answer - which was restated very well in a post on StackOverflow.com had a pointer on how to do this.
Bottom line for local development - with Chrome and jQuery is to be sure you add the following parameter to your shortcut for starting up the Chrome browser.