3

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

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

4

2 回答 2

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;
}
于 2013-08-03T22:02:32.133 回答
0

您必须将绝对 url 替换http://localhost:8080/login为相对 url，例如/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;
}
于 2013-07-22T09:52:33.930 回答