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

Question

我正在开发一个在客户端使用 Spring MVC 和 JQuery 的应用程序。我的客户端执行的 AJAX 调用(托管在 Apache 上并在端口 80 上运行的页面)如下所示:

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;
}

而我的服务器(运行在 8080 端口的 Tomcat)设计如下(考虑到 CORS 要求):

@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");
    // Do validation here
    }

这是 Chrome 控制台上显示的错误:

XMLHttpRequest cannot load http://localhost:8080/login. Origin http://localhost is not allowed by Access-Control-Allow-Origin. 

尽管设置了跨域 header ，但为什么会出现此错误？有人可以解释一下我在这里做错了什么吗？

Answer 1

显然 jQuery 奇怪地摆弄了我的 POST 参数。我所要做的就是将 data 参数包含在 JSON.stringify() 中。

修改后的查询看起来像:

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;
}