How to enable Cross-Site XMLHttpRequests (Cors)

Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the resource originated.

By default, it’s not possible to make HTTP requests using Javascript from a source domain that is different from the called endpoint. For example, this means that it’s not possible to call the URL http://socialengine.ipragmatech.com/api/user from a domain http://ipragmatech.com.This limitation has been introduced for security reasons: in fact, without this protection, a malicious javascript code could get info from another site without noticing the user. However, even if the reason for this limitation is clear, sometimes we need to call anyway something that is not hosted on our site.

Why is CORS important?

CORS communication allows you to overtake the problem by defining some rules that make the request more “secure”. CORS is a W3C spec that allows cross-domain communication from the browser. By building on top of the XMLHttpRequest object, CORS allows developers to work with the same idioms as same-domain requests. The use-case for CORS is simple. Imagine the site http://socialengine.ipragmatech.com has some data that the site http://ipragmatech.com wants to access. This type of request traditionally wouldn’t be allowed under the browser’s same origin policy. However, by supporting CORS requests, http://socialengine.ipragmatech.com can add a few special response headers that allow http://ipragmatech.com to access the data.


How does it work

CORS is a simple “check” based on HEADERS between the caller and the server. The browser (client) adds the current domain into the header of the request using the key Origin. The server checks that this value matches with the allowed domains specified in the attribute, answering with another HEADER information named Access-Control-Allow-Origin If both keys have the same values, you have the data, otherwise you’ll get an error. The screenshot below shows the headers:

How to fix it

There are various ways by which you can fix the CORS issue on your server, which some of them are explained on this blog. Please have a look.


Cors on the Apache

To add the CORS authorization to the header using Apache, simply add the following line inside either the <Directory><Location><Files> or <VirtualHost> sections of your server config (usually located in a *.conf file, such as httpd.conf or apache.conf), or within a .htaccess file:

Header set Access-Control-Allow-Origin "*"

To check your configuration changes for errors. After this passes, you may need to reload Apache to make sure your changes are applied by running the command

sudo service apache2 reload

Altering headers requires the use of mod_headers. Mod_headers is enabled by default in Apache, however, you may want to ensure it’s enabled by run.

a2enmod headers

Cors on the Php

If you don’t have access to configure Apache, you can still send the header from a PHP script. It’s a case of adding the following to your PHP scripts:

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

Cors on the Tomcat

Apache Tomcat includes support for CORS The full documentation can be found here: http://tomcat.apache.org/tomcat-7.0-doc/config/filter.html#CORS_Filter. Here is an example from those docs that demonstrates a minimal CORS configuration:




If you want to implement Cross-origin resource sharing (CORS) mechanism that allows restricted resources on a web page to be requested from another domain outside the domain then implementation of the CORS are very easy steps as described above. You can add the changes on the server in your own way to make it more attractive as per your requirements. Please let us know if you have any query.


Enable cross-origin resource sharing


Further reading

Cross-Origin Resource Sharing (CORS)

CORS Enabled