java - XHR Error : Origin http://localhost is not allowed by Access-Control-Allow-Origin -

i'm working on application uses spring mvc, , jquery on client side. ajax call executed client (a page hosted on apache running on port 80) looks :

var login = function() {   $.ajax({     url: "http://localhost:8080/login",     type: 'post',     data: { key: "value" },     error: function(jqxhr){console.log("error");}   }).done(function(data, textstatus, jqxhr) {     console.log(jqxhr.responsetext);   });   return false; } 

and server (tomcat running on port 8080) designed follows (taking account cors requirements) :

@requestmapping(value = "/login", method = requestmethod.post) @responsebody public string login(httpservletresponse response, @requestbody map<string,object> requestparameters){     response.setheader("access-control-allow-origin", "*");     response.setheader("access-control-allow-headers", "*");     response.setheader("access-control-request-method","*");     string value = (string) requestparameters.get("key");     // validation here     } 

and error displayed on chrome console :

xmlhttprequest cannot load http://localhost:8080/login. origin http://localhost not allowed access-control-allow-origin.  

despite setting cross domain headers, why i'm getting error? kindly explain i'm doing wrong here?

apparently jquery fiddling around post parameters weirdly. had fix enclose data parameters in json.stringify().

the modified query looks :

var login = function() {   $.ajax({     url: "http://localhost:8080/login",     type: 'post',     data: json.stringify({ key: "value" }),     error: function(jqxhr){console.log("error");}   }).done(function(data, textstatus, jqxhr) {     console.log(jqxhr.responsetext);   });   return false; }