$http.get和jQuery$.getJSON错误，但URL在自己的选项卡中可以正常打开

我被难住了。我正试图通过名字提出一个简单的客户查询请求。

jQuery.ajax（）

（从控制台）和Angular的

$http.get（）

都出错了，但我不知道为什么。当我在另一个选项卡中打开这些函数的相同URL时，它会显示预期的JSON响应

jQuery

$.ajax("http://[ip#]:8081/customerservice/customer/search?firstName=John", {
  "dataType": "json",
  "success": function() {
    alert("success");
    console.log("jQuery data", data);
  },
  "error": function(jqXHR, textStatus, errorThrown) {
    alert("error");
    console.log("jQuery jqXHR", jqXHR);
    console.log("jQuery textStatus", textStatus);
    console.log("jQuery errorThrown", errorThrown);
  },
  "complete": function(jqXHR, textStatus) {
    alert("complete");
    console.log("jQuery jqXHR", jqXHR);
    console.log("jQuery textStatus", textStatus);
  }
});

$.post(
    "http://[ip#]:8081/customerservice/customer/search",
    "firstName=John&lastName=Smith",
    function (data, textStatus, jqXHR) {
      console.log("success!", data);
    }
);

结果：触发错误和完整警报

textStatus

为“error”，

errorhorn

为空字符串，jqXHR包含

readyState    0
responseText  ""
status        0
statusText    "error"

棱角分明

return $http.get('http://[ip#]:8081/customerservice/customer/search?firstName=John',
    {
        responseType: "json"
    }
)
.success(function(data, status, headers, config){
    alert("angular success");
})
.error(function(data, status, headers, config){
    alert("angular error");
    console.log(status);
    console.log(headers());
    console.log(config);
})
;

$http.post("http://[ip#]:8081/customerservice/customer/search",
        "firstName=John&lastName=Smith"
    )
    .success(function(data, status, headers, config) {
        $scope.result = data;
    })
    .error(function(data, status, headers, config) {
        $scope.result = data || "Request failed";
        console.log("status: ", status);
        console.log("headers: ", headers());
        console.log("config: ", config);
    })
;

结果我在Firebug中看到一个“200OK”和给定URL的响应时间。状态为404，headers（）返回一个空对象，配置对象为

headers           Object { Accept="application/json, text/plain, */*"}
Accept            "application/json, text/plain, */*"
method            "GET"
responseType      "json"
transformRequest  [function()]
    0
    function()
transformResponse [function()]
    0
    function()
url               "http://[ip#]:8081/customerservice/customer/search?firstName=John"

萤火虫也会出现

Response Headers
Content-Type    application/json
Date    Sat, 15 Feb 2014 05:13:02 GMT
Server  Apache-Coyote/1.1
Transfer-Encoding   chunked

Request Headers
Accept  application/json, text/plain, */*
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
DNT 1
Host    [ip#]:8081
Origin  http://127.0.0.1
Referer http://127.0.0.1/
User-Agent  Mozilla/5.0 (X11; Linux x86_64; rv:24.0) Gecko/20100101 Firefox/24.0

其他信息我在一个虚拟机中运行这个，尽管我仍然可以访问整个互联网，并且可以直接访问[ip]。我不熟悉Angular，这就是为什么我尝试使用jQuery

那么，发生了什么事？我在Angular UI Typeahead示例的基础上构建了它，它与Google地理代码URL配合得很好。是因为我使用的是IP和/或端口吗？是不是有什么东西让我看不到

更新：CORS头已经添加，jQuery现在可以工作了，但Angular提供了404。它似乎是默认发送的

X-request-With

头，但我使用的是1.2

jQuery

$.ajax("http://[ip#]:8081/customerservice/customer/search?firstName=John", {
  "dataType": "json",
  "success": function() {
    alert("success");
    console.log("jQuery data", data);
  },
  "error": function(jqXHR, textStatus, errorThrown) {
    alert("error");
    console.log("jQuery jqXHR", jqXHR);
    console.log("jQuery textStatus", textStatus);
    console.log("jQuery errorThrown", errorThrown);
  },
  "complete": function(jqXHR, textStatus) {
    alert("complete");
    console.log("jQuery jqXHR", jqXHR);
    console.log("jQuery textStatus", textStatus);
  }
});

$.post(
    "http://[ip#]:8081/customerservice/customer/search",
    "firstName=John&lastName=Smith",
    function (data, textStatus, jqXHR) {
      console.log("success!", data);
    }
);

棱角分明

return $http.get('http://[ip#]:8081/customerservice/customer/search?firstName=John',
    {
        responseType: "json"
    }
)
.success(function(data, status, headers, config){
    alert("angular success");
})
.error(function(data, status, headers, config){
    alert("angular error");
    console.log(status);
    console.log(headers());
    console.log(config);
})
;

$http.post("http://[ip#]:8081/customerservice/customer/search",
        "firstName=John&lastName=Smith"
    )
    .success(function(data, status, headers, config) {
        $scope.result = data;
    })
    .error(function(data, status, headers, config) {
        $scope.result = data || "Request failed";
        console.log("status: ", status);
        console.log("headers: ", headers());
        console.log("config: ", config);
    })
;

正如他所指出的，这是一个CORS问题

添加

accesscontrolalloworigin

头允许jQuery响应开始工作

但是，“$http服务将自动向所有请求添加某些http头”[“”，AngularJS文档]。在本例中，它是一个

内容类型

标题，并导致另一个CORS问题：

选项。。。访问控制允许标头不允许请求标头字段内容类型。

这在Firebug和Firefox的控制台上都没有出现。直到我尝试了Chrome，我才得到任何有助于调试的输出

解决办法是：

将

内容类型

添加到

访问控制允许标题

（请参见注释），或

从请求中删除默认的

内容类型

标题，类似于

---

注意：我的同事开发人员已经指定了

x-request-with

的

Access Control Allow Headers

，所以我不知道该条目是否会否定所有其他条目，或者是否需要以任何方式指定

Content Type

。

看起来像是一个同源策略冲突问题。。。页面和资源是否在dame域中？是的，肯定是CORS的问题。您需要更改服务器的“允许来源”和“允许标题”设置。浏览器正在预处理您的请求，并确定您的xHr设置配置为发送什么，而不是端点配置为接收什么。如果你们中有人提交答案，我会在服务器更新后接受确认。