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

Posted 2023-02-27

【中文标题】XHR 错误：Access-Control-Allow-Origin 不允许来源 http://localhost

【英文标题】：XHR Error : Origin http://localhost is not allowed by Access-Control-Allow-Origin

【发布时间】：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. 

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

【参考方案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;