XHR 错误：Access-Control-Allow-Origin 不允许来源 http://localhost答案

【问题标题】：XHR Error : Origin http://localhost is not allowed by Access-Control-Allow-OriginXHR 错误：Access-Control-Allow-Origin 不允许来源 http://localhost
【发布时间】：2013-07-20 23:55:47
【问题描述】：

我正在开发一个在客户端使用 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;
}

而我的服务器（Tomcat 运行在 8080 端口）设计如下（考虑到 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.

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

【问题讨论】：

标签： java jquery spring xmlhttprequest cors

【解决方案1】：

您必须将绝对网址 http://localhost:8080/login 替换为相对网址，例如 /login。

否则，如果您不想更改 url，您可以将 crossDomain: true 添加到您的 ajax 函数中，如下所示：

var login = function() {
  $.ajax({
    url: "http://localhost:8080/login",
    type: 'POST',
    data: { key: "value" },
    crossDomain: true;
    error: function(jqXHR){console.log("Error");}
  }).done(function(data, textStatus, jqXHR) {
    console.log(jqXHR.responseText);
  });
  return false;
}

【讨论】：

对不起，也许我没有在问题中说清楚，我有两台服务器正在运行。 AJAX 请求在 Apache 服务器（运行在 80 端口）上产生，并发送到 Tomcat 服务器（在 8080 端口运行）。

【解决方案2】：

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

【讨论】：