Getting request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

I am trying to send an Ajax request to a Tomcat server from my application, but I am getting this error (my web app is running on Chrome):

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 403.

I have tried using

'Access-Control-Allow-Origin' : 'http://localhost:8080/app', 

but it didn't work.

My Ajax code:

 var arr = [1];    $.ajax({     url: 'http://localhost:8080/app',    type: 'POST',    contentType:'application/json',    headers: {    'Access-Control-Allow-Origin' : 'http://localhost:8080',    },        data: JSON.stringify(arr[0]),        success: function(data){         //On ajax success do this              alert(data);           }      }); 

Answer 1

Basically, to make a cross domain AJAX requests, the requested server should allow the cross origin sharing of resources (CORS). You can read more about that from here: http://www.html5rocks.com/en/tutorials/cors/

In your scenario, you are setting the headers in the client which in fact needs to be set into http://localhost:8080/app server side code.

If you are using PHP Apache server, then you will need to add following in your .htaccess file:

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