$ httpProvider拦截器不拦截我的API调用

Question

我有一个角度应用程序向API服务发出异步请求。由于API服务上的许多资源都受到保护，因此我需要拦截对服务发出的HTTP请求。但据我所知，拦截器我只定义了拦截页面加载请求。

这是我用来说明问题的实验设置：

myApp = angular.module('myApp', []);

myApp.config(['$httpProvider', function($httpProvider) {
    $httpProvider.interceptors.push(function() {
        return {
            response: function(response) {
                console.log(response);
                return response;
            }
        };
    });
});

我能够看到的是，拦截器拦截除API调用之外的所有调用，如附图所示，显示控制台输出。

从下面的屏幕截图中可以看到，控制台输出包含加载部分模板时记录的响应，但不包括在向API服务发出GET请求时记录的响应。

为什么会这样？

更新

我已将我的设置更改为包含所有可能的请求和响应组合：

$httpProvider.interceptors.push(function() {
    return {
        request: function(request) {
            console.log(request);
            return request;
        },
        requestError: function(request) {
            console.log(request);
            return config;
        },
        response: function(response) {
            console.log(response);
            return response;
        },
        responseError: function(response) {
            console.log(response);
            return response;
        }
    };
});

现在拦截器拦截了消息，但奇怪地将捕获的responseError的状态显示为：

status: -1

虽然它显然是401。

更新2

事实证明，即使401响应也需要将CORS标头添加到其中。问题出现了，因为我调用的REST API使用的是Spring-CORS库，它不包含401和403响应的CORS头。

Answer 1

这是一个跨站点域名问题，因为虽然您使用localhost的API调用域与UI（端口8080＆amp; 8081）不同，但请阅读本文以获取更多信息。您需要在网络服务器中添加此标头：

Access-Control-Allow-Origin: http://foo.example

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS