为什么此 JavaScript 代码仅在我在 HTTP 服务器上运行时才有效？

Question

I am trying to build a Chrome Extension which uses the Google Calendar API. I am trying to avoid having to setup a server just to make API calls to Google Calendar. I tried following the example here:

https://developers.google.com/google-apps/calendar/quickstart/js#step_2_set_up_the_sample

But that code requires me to have a HTTP Server running. Why does that code only work when I run it on an HTTP Server? From what I can see, its only JavaScript and HTML, which should work when I run it locally on my browser (using the file:// protocol). I also don't see any CORS issues either.

I could probably just setup a Heroku server, but I'm trying to understand why this seemingly client side code requires a server to run!

Answer 1

Some browsers prevent Javascript in web pages loaded from a file:// URL from doing some things for security reasons, such as making ajax calls.

So, since this code is ultimately making some Ajax calls out to a calendar server, the code probably wants to make sure your web page is not restricted by these security limitations so it is suggesting a way that the web page can be loaded from a local web server, rather than the file system and thus it won't have any restrictions applied to pages loaded with file:// URLs.

It's worth mentioning that the security restrictions applied to file:// URLs are browser-specific (each browser makes it's own choices as to what to restrict). Chrome seems to be fairly restrictive in this regard (though I think there is a command line argument that can relax some of these restrictions).