Question

In chrome I’m encountering the above error that blocks the browser from pulling calendar data from Google. I have tested the url independently and it works.

From what I’ve been able to research, the cross-site request done with $.ajax against an XML source triggers the Access-Control-Allow-Origina error.

Per jQuery, http://api.jquery.com/jQuery.ajax the crossDomain=true should make it work with some browsers, but it doesn’t in chrome.

Per other answers on stack, $.getJSON should sidestep the issue and we can get the feed as a json http://googleappsdeveloper.blogspot.com/2010/09/new-json-format-for-google-calendar-api.html with the ?alt=jsonc arg.

Before I get into the code more deeply, how can I get this to work?

Answer 1

You’ve answered your own question. getJSON should be able to leverage JSONP which is a cross domain request embedded in a script block think

<script src="http://someforeigndomain.com/doc.json"></script>

What the server really returns is

callback({some: "relevant", json: "object"});

This is then acted upon by your code that

function callback(obj) {
   //do something with json.
}

Jquery in this case does all the heavy lifiting of tieing the callback into the one you specify in your getJSON config object. But i hope this helps you understand whats going on with getJSON when accessing data outside of your domain. It isn’t REALLY ajax.

---

More specifically the reason your experiencing the error with ajax is that browser implement a protection similar to flash that disallow cross domain scripting as a security mechanism. Just like with crossdomain.xml this can be worked around if you own the destination server by implementing CORS, this means listening for requests with the OPTION method and sending back headers that allow the originating domain. This mainly helps domain combat XSS that would otherwise cause DDOS or SPAM, while still allowing trusted external sites to communicate with it’s web services. Hope that helps.

---

For info on the jQuery part of your question just read $.getJSON from the Jquery Docs its pretty straight forward.