AngularJS $ http错误的http状态出错 [英] AngularJS $http wrong http status on error
问题描述
我正在尝试使用AngularJS的$ http服务构建一个JSONP请求，并且在出现错误时我得到错误的http状态代码404而不是500，并且页面正文也丢失了。
I am trying to build a JSONP request with AngularJS's $http Service and on errors I am getting wrong http status code 404 instead of 500, and the body of the page is missing too.
所以这是场景：
我正在调用的URL返回500内部服务器错误，其中包含错误消息的JSON输出：
The URL I am calling returns a 500 Internal Server Error with a JSON output containing the error message:
http ：//private.peterbagi.de/jsfiddle/ng500status/api.php？code = 500& callback = test
index.html
（见实际操作： http://private.peterbagi.de/jsfiddle/ng500status/ ）
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"
});
}
}]);
当您单击失败按钮时，返回的状态为404，
响应正文为也错过了。
When you click on the Fail button the returned status is 404 and the response body is missing too.
输出
{
"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"
}
在Chrome DevTools网络面板中，您会看到正确的响应代码（500 ）我希望在Angular输出中看到相同的结果。
In Chrome DevTools Network panel you see the correct response code (500) and I would expect to see the same result in the Angular output.
为什么会发生这种情况或我做错了什么？
Why is this happening or what am I doing wrong?
更新：
我构建了一个类似的例子，但使用GET-Requests而不是JSONP并且效果很好： http://private.peterbagi.de/jsfiddle/ng500status2/
I built the a similar example, but with GET-Requests instead of JSONP and it works well: http://private.peterbagi.de/jsfiddle/ng500status2/
它似乎是一个JSONP具体问题。然而，它并没有解决我的初始问题，因为我必须使用跨域请求。任何想法？
It seems to be a JSONP specific problem. Nevertheless it doesn't solve my initial problem, because I have to work with Cross-Domain Requests. Any ideas?
推荐答案
根据角度来源的 httpBackend.js 第63行和第190行，
JSONP请求的状态只能是-1，404或200。
the status of a 'JSONP' request can only be -1, 404, or 200.
原因是角度'JSONP'请求不是XMLHttpRequest。 AFAIK无法以这种方式处理特定的错误代码。 javascript知道的唯一事情就是此请求是否成功。
The reason is that in angular 'JSONP' request is not an XMLHttpRequest. AFAIK there is no way to handle the specific error code in this way. The only thing javascript know is whether this request succeeded.
更新：
在上面的答案中：
'JSONP'请求的状态只能是-1,404或200.
the status of a 'JSONP' request can only be -1, 404, or 200.
这意味着此请求的响应由angular给出的状态。
This means the status given by angular for the response of this request.
XMLHttpRequest 是我们通常在ajax中使用的标准请求类型。它向服务器发送请求并获取响应，以便您可以看到HTTP服务器端给出的状态代码（200,404,500,401等）。
XMLHttpRequest is the standard request type we normally used in ajax.It sends request to the server and fetch the response so you can see the HTTP status code(200,404,500,401,etc.) given by the server side.
但是，它有限制，就像在大多数情况下你不能创建跨域 XMLHttpRequest （除非您在服务器端设置了 allow-cross-domain 标头）。
However, it has limits like in most cases you cannot make a cross-domain XMLHttpRequest (unless you've set up the allow-cross-domain header on the server side).
通过这种方式，我们需要 JSONP 来帮助我们制作跨域请求。实际上'jsonp'会将< script> 标记附加到您的文档中（在请求完成时始终会删除） src 属性是您给出的URL。
In this way we need JSONP to help us make cross-domain requests. In fact 'jsonp' is appending <script> tags to your document (which are always removed when request finished) whose src attributes are the URLs you given.
在角度中，会将侦听器添加到此< script> 中以跟踪请求的状态。但是，这些侦听器只能判断脚本是否已成功加载。如果成功，则角度将响应的状态设置为200.如果不成功，则分配404。这就是为什么状态字段是404或200，无论服务器实际给出什么。
In angular, listeners are added to this <script> to track the status of the request. However, these listeners can only tell whether the script is loaded successfully. If it succeeded, angular set the status of your response to 200. If not, 404 is assigned. That is why the status field is either 404 or 200, regardless of what the server actually gives.
这篇关于AngularJS $ http错误的http状态出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
