Access-Control-Allow-Origin不允许源，jQuery Mobile

Question

I am developing a jQuery mobile webpage in my local server. I am using XAMPP so I have an Apache server.

I am trying to import a Google Calendar in my page , but I get the error :

Origin is not allowed by Access-Control-Allow-Origin

I found more than a million posts about it, I couldn't understand any of them.

They are all talking about a PHP file that I need to add a header etc. I don't have any PHP files, it is all HTML and JavaScript.

I also read, that I could configure Apache so that it allowed me to make cross domain connections.

From here I quote :

If you're using Apache just add:

 <ifModule mod_headers.c> Header set Access-Control-Allow-Origin: * </ifModule> 

in your configuration. This will cause all responses from your webserver to be accessible from any other site on the internet. If you intend to only allow services on your host to be used by a specific server you can replace the * with the URL of the originating server.

Where exactly do I add this piece of code? I tried to add it in the httpd.conf but nothing changed.

Any ideas?

Answer 1

You can force Google Chrome to not moan about Cross-domain-origin(s) Adding this flag --disable-web-security when running chrome will allow you to test successfully. I've added it to the target variable of my Chrome shortcut on my desktop like so:

"C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe" --disable-web-security

Hence everytime I start Chrome it automatically is started with this flag in place and I can test cross-domain ajax calls without any issues.

Answer 2

Re-read the description of the Apache setting you provided:

This will cause all responses from your webserver to be accessible from any other site on the internet. If you intend to only allow services on your host to be used by a specific server you can replace the * with the URL of the originating server.

In other words, this setting causes the Apache server to accept all incoming cross-domain requests of resources hosted on your server.

But that is not what you want. You want to access, via a cross-domain request, resources on Google's server. You will only be able to access these resources if they allow it. Fortunately, Google Calendar has an API that will allow you to access calendars through the methods that they've provided. You should check it out here .

Answer 3

You should enable CORS on your PHP server, try using the following code there:

<?php
 header("Access-Control-Allow-Origin: *");

More information on how to enable CORS on your server can be found here: http://enable-cors.org/server_php.html

But please consider that if you are requesting information from a server which you have no control and has no CORS enabled, you cannot make AJAX call from your JavaScript.