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