Angular 的 $http.post 不起作用，它的 $http... 也不起作用，但 jQuerys ajax 起作用。为啥？

Posted 2023-03-04

【中文标题】Angular 的 $http.post 不起作用，它的 $http... 也不起作用，但 jQuerys ajax 起作用。为啥？

【英文标题】：Angular's $http.post doesn't work, nor does its' $http... but jQuerys ajax does. Why?Angular 的 $http.post 不起作用，它的 $http... 也不起作用，但 jQuerys ajax 起作用。为什么？

【发布时间】：2015-06-26 14:20:07

【问题描述】：

出于某种原因：

return jquery.ajax('my url', 
    crossDomain : true
  , data : JSON.stringify("brand": self.current)
  , type : 'POST'
  ).success(function(data)
    scope.results = data;
  );

和/或这个：

curl -X POST -H "Content-Type: application/json" -d '"brand":"target"' myUrl

工作正常，但是这个：

var req = 
  method: "POST"
, url : "my url"
, data : JSON.stringify("brand": self.current)
;

return $http(req).
  success(function(data)
    scope.results = data;
);

惨遭失败

"OPTIONS 我的 url (匿名函数) @ angular.js:9866sendReq @ angular.js:9667$get.serverRequest @ angular.js:9383processQueue @ angular.js:13248(匿名函数) @ angular.js:13264$ get.Scope.$eval @ angular.js:14466$get.Scope.$digest @ angular.js:14282$get.Scope.$apply @ angular.js:14571(匿名函数) @ angular.js:21571jQuery.event [e-mail]:[e-mail]:4116

(index):1 XMLHttpRequest 无法加载我的网址。请求的资源上不存在“Access-Control-Allow-Origin”标头。 因此，Origin 'http://localhost:5000' 不允许访问。响应的 HTTP 状态代码为 404。”

---

它们是相同的网址。重量级 我偷偷怀疑 jquery 中的“crossDomain：true”选项是 jquery 工作的原因，但如果是这样的话，那么问题是：

我如何使用 angular 来做到这一点？

-- 使用 jquery 的默认 ajax 方法时，范围不会随结果更新，但我知道正在分配数据，因为我正在将其注销，如果我再次提交请求，范围会更新与第二个值。

第二个问题 - 为什么我的视图没有随结果更新？

---

更新：

失败的原因与我从服务器返回的响应无关，问题是 Angular 正在将此 POST 请求转换为 OPTIONS 请求： （取自谷歌浏览器的 xhr 工具：）

Remote Address: the remote address
Request URL:the request endpoint
Request Method:OPTIONS <-------------
Status Code:404 Not Found

进一步检查显示：

OPTIONS /my url HTTP/1.1 <--------------
Host: my urls host
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: POST
Origin: http://localhost:5000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (Khtml, like Gecko) Chrome/42.0.2311.90 Safari/537.36
Access-Control-Request-Headers: accept, charset, content-type
Accept: */*
Referer: http://localhost:5000/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8

这不是它应该做的，因为我在我传递给 $http 的 req 对象中特别说这是一个 POST 请求。

...

那么我如何制作有角度的...不要那样做？

还有-为什么要这样做？

【问题讨论】：

第二个问题的答案是：你需要打电话给$scope.$apply()，因为angular不知道jquery中发生的事情。

如果它们是相同的 url，您可以尝试删除 localhost:5000/end_point 并仅添加 '/end_point'

@AtaurRahimChowdhury 这是一个跨域请求。我在本地开发，但服务调用是我不拥有的网站。

【参考方案1】：

当您从浏览器发出跨域请求时，所有浏览器都会点击 URL（在 AJAX 调用中提供）以确认跨域请求是否可用，这称为预检请求。 https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

因此，您的服务器端点必须允许预检请求，以便通过设置一些响应标头（如 Groovy 中的示例）使此调用正常工作：

response.setHeader "Access-Control-Allow-Headers", "Content-Type"
response.setHeader "Access-Control-Allow-Methods", "POST,DELETE,PUT"
response.setHeader "Access-Control-Allow-Origin", "*"

【讨论】：

在这种情况下这实际上不是问题 - 服务器将发送正确的响应，但 Angular 正在将请求转换为 OPTIONS 请求，而不是 POST 请求。

另外，您的解决方案无法解决问题，因为您没有在 Access-Control-Allow-Methods 中包含“OPTIONS”

Angular 这样做是为了安全防范，而 jQuery 则不然。通过将服务器设置为“Access-Control-Allow-Origin”、“*”，您是在告诉服务器允许任何内容标头，这反过来又允许您的 $http.post 工作。 CORS 是您开始使用 Angular 跨域进行 http 调用时发现的小惊喜之一。

我认为，默认情况下允许使用 OPTIONS 方法，因此它适用于我的情况（在基于 Grails 的应用程序中）。可能，您的服务器默认情况下不允许该方法，因此将其添加到允许的方法应该可以解决其中一个问题。