XHR错误：访问控制 - 允许来源不允许访问http：// localhost

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

您必须用/login这样的相对网址替换绝对网址http://localhost:8080/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; 
}