Angular $http.post не работает, как и его $http, но jQuerys ajax работает. Почему?

Почему-то это:

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

терпит неудачу с

«ОПЦИИ мой 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.dispatch @ jquery.js:4430jQuery.event.add.elemData.handle @ jquery.js:4116

(index):1 XMLHttpRequest не может загрузить мой URL. В запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin». Источник «http://localhost:5000' поэтому доступ запрещен. В ответе был код состояния HTTP 404».

Это один и тот же URL. Втф. У меня есть подозрение, что параметр «crossDomain: true» в jquery является причиной того, что jquery работает, но если это так, то вопрос:

как мне это сделать с угловым?

-- При использовании метода ajax по умолчанию jquery область не обновляется с результатами, но я знаю, что данные назначаются, потому что я выхожу из нее, и если я снова отправлю запрос, область обновляется со вторым стоимость.

Второй вопрос: почему мое представление не обновляется с результатами?

Обновить:

Причина, по которой это не работает, не имеет ничего общего с ответом, который я получаю от сервера, проблема в том, что Angular преобразует этот запрос POST в запрос OPTIONS: (взято из инструмента xhr google chromes :)

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

это не то, что он должен делать, потому что я специально говорю в объекте req, который я передаю $http, что это запрос POST.

...

Итак, как мне сделать угловой... НЕ делать этого?

также - почему это делается?


cors ajax angularjs angularjs-watch angularjs-http
person Andrew Luhring    schedule 20.04.2015    source источник
comment
Ответ на второй вопрос: вам нужно вызвать $scope.$apply(), потому что angular не знает о том, что происходит в jquery.   -  person tandrewnichols    schedule 20.04.2015
comment
Если это один и тот же URL, попробуйте удалить localhost:5000/end_point и добавить только '/end_point'   -  person Ataur Rahim Chowdhury    schedule 20.04.2015
comment
@AtaurRahimChowdhury это запрос из разных источников. Я разрабатываю локально, но сервисный звонок - это веб-сайт, которым я не владею.   -  person Andrew Luhring    schedule 20.04.2015

Ответы (1)


arrow_upward
1
arrow_downward

Когда вы выполняете кросс-источниковый запрос из своего браузера, все браузеры обращаются к 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", "*"
person Shashank Agrawal    schedule 20.04.2015
comment
На самом деле это не проблема в данном случае - сервер будет отправлять правильный ответ, но Angular преобразует запрос в запрос OPTIONS, а не запрос POST. - person Andrew Luhring; 22.04.2015
comment
Кроме того, ваше решение не решит проблему, потому что вы не включили ОПЦИИ в свои методы управления доступом. - person Andrew Luhring; 22.04.2015
comment
Angular делает это из соображений безопасности, а jQuery — нет. Установив для сервера значение Access-Control-Allow-Origin, *, вы сообщаете серверу разрешить любые заголовки контента, что, в свою очередь, позволит вашему $http.post работать. CORS — это один из маленьких сюрпризов, который вы обнаружите, когда начнете выполнять http-вызовы между доменами с помощью Angular. - person Chris; 22.04.2015
comment
Я думаю, что метод OPTIONS разрешен по умолчанию, поэтому он работает в моем случае (в приложении на основе Grails). Возможно, ваш сервер не разрешает этот метод по умолчанию, поэтому добавление его в разрешенные методы должно решить одну из этих проблем. - person Shashank Agrawal; 22.04.2015