【发布时间】:2016-09-18 00:20:52
【问题描述】:
我正在尝试使用 AngularJS 的 $http 服务构建 JSONP 请求,但出现错误时我得到了错误的 http 状态代码 404 而不是 500,并且页面的正文也丢失了。
所以这里是场景:
我调用的 URL 返回 500 Internal Server Error 并带有包含错误消息的 JSON 输出:
http://private.peterbagi.de/jsfiddle/ng500status/api.php?code=500&callback=test
index.html
(查看实际操作: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,并且 响应正文也丢失了。
输出
{
"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 Network 面板中,您会看到正确的响应代码 (500),我希望在 Angular 输出中看到相同的结果。
为什么会发生这种情况或我做错了什么?
更新:
我构建了一个类似的示例,但使用 GET-Requests 而不是 JSONP,并且效果很好:http://private.peterbagi.de/jsfiddle/ng500status2/
这似乎是 JSONP 特定的问题。尽管如此,它并没有解决我最初的问题,因为我必须处理跨域请求。有什么想法吗?
【问题讨论】:
-
你看到那个网址了吗?你的
BASE_URL错了 -
不不,我只是将其删除,因为我不想将其公开...该 URL 存在,如果我在新选项卡中打开它,我也会收到 500 错误并且可以看到响应 json,其中包含一条错误消息。
-
改成
http://localhost排除这种混淆 -
很好的提示,谢谢!我改了
-
您能否提供有关此问题的更多信息?您使用的 AngularJS 版本是什么?使用
angular-resource是否有相同的结果?