Question

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

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.

尽管设置了跨域标头，为什么我收到此错误？有人可以在这里解释我做错了吗？

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

Answer 2

您必须将绝对网址http://localhost:8080/login替换为/login之类的相对网址。

否则，如果您不想更改网址，可以将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;
}

XHR错误：原始http：//本地主机不允许使用Access-Control-Allow-Origin

2 个答案: