Angularjs：如何拦截外部 url $resource 或 $http 服务中的错误？

Question

我在与我的 grunt 服务器不同的服务器上提供了一项服务，该服务器为我的 angularjs 应用程序提供服务。
外部服务器是 Apache 服务器，使用 PHP 提供 JSON 数据。 我想拦截任何可能的服务器错误（从“服务器停机”到“404”...）。

我尝试过这样使用拦截器：

app.factory('myFactory', function($resource) {
  return $resource('http://www.remote.server.com/api/WRONGPATH',
});

app.config(function ($routeProvider, $httpProvider) {

  ...

  $httpProvider.responseInterceptors.push(function($q) {
    return function(promise) {
      return promise.then(function(successResponse) {
        if (successResponse.config.method.toUpperCase() !== 'GET') {
          console.info('success');
        }
        return successResponse;
      }, function(errorResponse) {
        switch (errorResponse.status) {
          case 401:
            console.info('wrong usename or password');
            break;
          case 403:
            console.info('no rights to do this');
            break;
          case 500:
            console.info('server internal error: ' + errorResponse.data);
            break;
          default:
            console.info('error ' + errorResponse.status + ': ' + errorResponse.data);
        }
        return $q.reject(errorResponse);
      });
    };
  });

});

没有成功：我总是陷入“默认”开关情况，errorResponse.status == 0。
我想这是因为浏览器在拦截 CORS 错误时停止...
如果我用本地网址更改远程网址，一切都会正常...

是否有可能处理 angular.js $resource（或 $http）远程请求错误？

我也会接受设计转变建议，比如以类似 grunt 的方式重新实现我的 PHP 服务......（我的 PHP 服务 - 实际上 - 只是从服务器文件夹打印图像名称的 JSON 列表...... .).

Answer 1

我相信您将拦截器推到了错误的位置。 $http docs 表示您应该继续前进：

$httpProvider.interceptors

而不是：

// I can only find references to this on old tutorials, so maybe it's been deprecated
$httpProvider.responseInterceptors 

所以你会有类似的东西：

$httpProvider.interceptors.push(function($q) {
  return {
    'response': function(response) {
      if (successResponse.config.method.toUpperCase() !== 'GET') {
        console.info('success');
      }
      return response || $q.when(response);
    },
    'responseError': function(response) {
       switch (response.status) {
        case 401:
          console.info('wrong usename or password');
          break;
        case 403:
          console.info('no rights to do this');
          break;
        case 500:
          console.info('server internal error: ' + response.data);
          break;
        default:
          console.info('error ' + response.status + ': ' + response.data);
      }

      return $q.reject(response);
    }
  };
});

工作 plnkr：here

Answer 2

据我了解，这是一个与 CSRF/XSRF 保护有关的问题，而不是 AngularJS。您将在其他框架或 poj 中遇到相同的问题。在 PHP 中，如果您跨域访问内容，则需要启用 CORS，并且需要指定需要访问或打开它的服务器。

http://www.w3.org/wiki/CORS_Enabled http://enable-cors.org/server_php.html

本质上，AngularJS 受限于浏览器提供的响应，这反过来又限制了响应，因为由于 XSRF 保护，请求是未经授权的。另外，对于 AngularJS 和 XSRF，它会读取令牌会话 cookie（由服务器提供）并将其放入后续请求的 HTTP 标头中，然后由服务器决定是否接受它。

https://docs.angularjs.org/api/ng/service/$http