Geek Answers Handbook

AngularJS $ http invalid http status on error

I am trying to create a JSONP request using the AngularJS $ http service, and on errors I get the wrong status code 404 instead of 500, and the body of the page is also missing.

So here is the scenario:

The url that I call returns 500 Internal Server Error with JSON output containing an error message:

http://private.peterbagi.de/jsfiddle/ng500status/api.php?code=500&callback=test

index.html
(see it in action: http://private.peterbagi.de/jsfiddle/ng500status/ )

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <script src= "//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> <script src= "app.js"></script> </head> <body ng-app="app" ng-controller="UploadController"> <button ng-click="upload(200)" value="OK">OK</button> <button ng-click="upload(500)" value="Fail">Fail</button> <pre>{{response | json}}</pre> </body> </html>

app.js

 var app = angular.module('app', []); app.constant('BASE_URL','http://private.peterbagi.de/jsfiddle/ng500status/'); app.controller("UploadController", ['$scope','Upload','BASE_URL', function($scope,Upload,BASE_URL) { $scope.upload = function(code) { Upload(code).then( function(response) { $scope.response = response; }, function(error) { $scope.response = error; } ); } }]); app.factory('Upload', ['$http','BASE_URL', function($http,BASE_URL) { return function (code) { var callUrl = BASE_URL + "api.php?code="+code; return $http({ method: 'JSONP', url : callUrl+"&callback=JSON_CALLBACK" }); } }]);

When you click the Fail button, 404 status is returned, and the response body is also missing.

Exit

 { "status": 404, "config": { "method": "JSONP", "transformRequest": [ null ], "transformResponse": [ null ], "url": "http://private.peterbagi.de/jsfiddle/ng500status/api.php?code=500&callback=JSON_CALLBACK", "headers": { "Accept": "application/json, text/plain, */*" } }, "statusText": "error" }

In the Chrome panel of DevTools Network you will see the correct response code (500), and I expect to see the same result in the output of Angular.

Why is this happening or what am I doing wrong?

Update:

I built a similar example, but with GET requests instead of JSONP, and it works well: http://private.peterbagi.de/jsfiddle/ng500status2/

This seems to be a specific JSONP issue. However, this does not solve my original problem, because I have to work with cross-domain queries. Any ideas?

+7
angularjs jsonp
source share
1 answer

According to the angular source httpBackend.js line 63 and line 190 ,

JSONP request status can only be -1, 404 or 200.

The reason is that in angular, the JSONP request is not XMLHttpRequest. AFAIK there is no way to handle a specific error code this way. The only thing javascript knows is whether this request succeeded.

UPDATE

Here is in my answer above:

JSONP request status can only be -1, 404 or 200.

This means the status set by angular to respond to this request.

XMLHttpRequest is the standard request type that we usually use in ajax.It sends a request to the server and returns a response so you can see the HTTP status code (200 404 500 401, etc.) specified by the server side.

However, it has limitations, because in most cases you cannot create cross-domain XMLHttpRequest (unless you have configured the allow-cross-domain header on the server side).

Therefore, we need JSONP to help us complete cross-domain requests. In fact, "jsonp" adds <script> tags to your document (which are always removed when the request ends), the src attributes are the URLs that you specified.

In angular, listeners are added to this <script> to track the status of the request. However, these listeners can only tell if the script loaded successfully. If this succeeds, angular set the response status to 200. If not, 404 is assigned. That's why the status field is 404 or 200, regardless of what the server actually gives.

+8
source

More articles:


All Articles