角的$ http.post不工作​​，也没有它的“$ HTTP ...但是jQuerys阿贾克斯一样。为什么？ [英] Angular's $http.post doesn't work, nor does its' $http... but jQuerys ajax does. Why?

问题描述

由于某种原因，这一点：

For some reason this:

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

做工精细，但这样的：

work fine, but this:

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

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

与失败草草收场

fails miserably with

选项我的网址（匿名函数）@ 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 $消化@ angular.js：14282个$ get.Scope $ @适用angular.js：14571（匿名函数）@ angular.js：21571jQuery.event .dispatch @的jquery.js：4430jQuery.event.add.elemData.handle @的jquery.js：4116

"OPTIONS my url (anonymous function) @ angular.js:9866sendReq @ angular.js:9667$get.serverRequest @ angular.js:9383processQueue @ angular.js:13248(anonymous function) @ angular.js:13264$get.Scope.$eval @ angular.js:14466$get.Scope.$digest @ angular.js:14282$get.Scope.$apply @ angular.js:14571(anonymous function) @ angular.js:21571jQuery.event.dispatch @ jquery.js:4430jQuery.event.add.elemData.handle @ jquery.js:4116

（指数）：1 XMLHtt prequest无法载入我的网址。没有访问控制 - 允许 - 原产地标头的请求的资源present。 原产地的http：//本地主机：5000 ，因此不允许访问。响应有HTTP状态code 404。

(index):1 XMLHttpRequest cannot load my url. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:5000' is therefore not allowed access. The response had HTTP status code 404."

他们是相同的URL。跆拳道。 我有一个鬼鬼祟祟的怀疑，跨域：真正的jQuery的选项就是为什么jQuery的一件作品，但如果是这样的话，那么问题是：

They're the same url. Wtf. I have a sneaking suspicion that the "crossDomain : true" option in jquery is why the jquery one works, but if that's the case, then the question is:

- 当使用jQuery的默认AJAX方法，适用范围没有更新的结果，但我知道数据被分配，因为我记录它，如果我再次提交申请，适用范围不更新与第二个值。

-- When using jquery's default ajax method, the scope isn't updating with the results, but i know the data is being assigned because i'm logging it out, and if i submit the request again, the scope does update with the second value.

这是失败的原因有无关，与我收到从服务器返回的响应，问题是，角度正在改变这个POST请求到OPTIONS请求： （从谷歌铬合金XHR工具采取：）

The reason this is failing has nothing to do with the response I'm getting back from the server, the problem is that Angular is transforming this POST request into an OPTIONS request: (taken from google chromes' xhr tool:)

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

进一步检查发现：

Further inspection reveals:

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

这是不是应该做的，因为我具体说，在REQ对象我传递至$ HTTP，这是一个POST请求。

which is not what it should be doing because I'm specifically saying in the req object i'm passing to $http that this is a POST request.

...

须─它为什么这样做？

推荐答案

当你从你的浏览器跨域请求，所有的浏览器击中URL（在AJAX调用中提供），以确认是否跨域请求可用或者不这被称为preflight请求。 https://developer.mozilla.org/en-US/docs/Web / HTTP / Access_control_CORS

When you do a cross-origin request from your browser, all browsers hit the URL (provided in AJAX call) to confirm if the cross-origin request is available or not which is known as preflight request. https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

那么，你的服务器的端点必须允许才能通过设置一些响应​​头状（Groovy中的一个例子），使这个电话的工作preflight要求：

So, your server's endpoint must allow the preflight request in order to make this call work by setting some response headers like (an example in Groovy):

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

这篇关于角的$ http.post不工作​​，也没有它的“$ HTTP ...但是jQuerys阿贾克斯一样。为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！