AngularJS 1.7 ui-router中获取HTTP请求头的实现咨询

嘿，作为AngularJS的新手，我完全懂你想在helpPage页面获取请求头的需求——咱们一步步拆解解决方案，分两种场景来处理：

场景1：获取前端AJAX请求的请求头/响应头 #

如果你是想获取前端发起的API请求的头信息，不管是请求头还是响应头，都可以通过ui-router的resolve或者控制器直接处理实现，也可以修正你的HttpInterceptor用法：

方法1：在ui-router的resolve中提前获取 #

resolve会在控制器加载前执行异步操作，非常适合提前准备数据，这里可以发起请求并捕获头信息：

.state('helpPage', {
  url: "/help",
  data: { roles: [] },
  resolve: {
    // 定义一个resolve依赖，用来获取头信息
    apiHeaders: ['$http', function($http) {
      // 替换成你实际要调用的API地址
      const requestConfig = {
        url: '/api/your-target-endpoint',
        method: 'GET'
      };

      // 这里可以查看默认的请求头
      console.log('AJAX请求头:', requestConfig.headers);
      // 如果需要自定义请求头，也可以在这里添加
      // requestConfig.headers['X-Custom-Header'] = 'your-value';

      return $http(requestConfig).then(response => {
        // 获取响应头
        const responseHeaders = response.headers();
        console.log('API响应头:', responseHeaders);
        // 返回请求头和响应头给控制器
        return {
          request: requestConfig.headers,
          response: responseHeaders
        };
      });
    }]
  },
  views: {
    helpDoc: {
      templateUrl: 'app/modules/help/help.tpl.html',
      controller: 'helpCtrl'
    }
  }
})

然后在helpCtrl中注入这个resolve依赖，直接使用：

angular.module('yourApp').controller('helpCtrl', ['$scope', 'apiHeaders', function($scope, apiHeaders) {
  // 在控制器中拿到resolve传递的头信息
  $scope.requestHeaders = apiHeaders.request;
  $scope.responseHeaders = apiHeaders.response;
  console.log('控制器中获取的请求头:', $scope.requestHeaders);
}]);

方法2：直接在helpCtrl控制器中获取 #

如果不需要提前加载，也可以在控制器内部发起请求并捕获头：

angular.module('yourApp').controller('helpCtrl', ['$scope', '$http', function($scope, $http) {
  const requestConfig = {
    url: '/api/your-target-endpoint',
    method: 'GET'
  };

  // 查看请求头
  console.log('请求头:', requestConfig.headers);
  
  $http(requestConfig).then(response => {
    // 获取响应头
    $scope.responseHeaders = response.headers();
    console.log('响应头:', $scope.responseHeaders);
  });
}]);

修正你的HttpInterceptor用法 #

如果你之前用Interceptor没生效，大概率是注册或者写法有问题。正确的拦截器会捕获所有$http请求，你可以针对性处理：

// 创建拦截器工厂
angular.module('yourApp').factory('headerInterceptor', ['$q', function($q) {
  return {
    // 拦截请求，获取/修改请求头
    request: function(config) {
      // 可以只针对help页面相关的请求处理
      if (config.url.includes('/api/help-related')) {
        console.log('Help页面请求的请求头:', config.headers);
        // 这里也可以修改请求头
        // config.headers['X-Help-Page'] = 'true';
      }
      return config || $q.when(config);
    },
    // 拦截响应，获取响应头
    response: function(response) {
      if (response.config.url.includes('/api/help-related')) {
        console.log('Help页面请求的响应头:', response.headers());
      }
      return response || $q.when(response);
    },
    // 处理错误响应
    responseError: function(rejection) {
      console.error('请求错误:', rejection);
      return $q.reject(rejection);
    }
  };
}]);

// 注册拦截器到$httpProvider
angular.module('yourApp').config(['$httpProvider', function($httpProvider) {
  $httpProvider.interceptors.push('headerInterceptor');
}]);

场景2：获取当前页面的HTTP请求头 #

如果你想获取的是用户访问/help页面时，浏览器发送给服务器的页面请求头（比如Host、User-Agent这些），前端JavaScript是无法直接获取的——这些头是浏览器和服务器之间的通信，前端没有权限访问。

这种情况下，你需要服务器端配合：

1. 在服务器端（比如Node.js、Java、PHP等）编写一个接口，返回当前页面请求的头信息
2. 前端在resolve或者控制器中调用这个接口，拿到头数据

举个例子，假设服务器提供了/api/get-page-headers接口，返回页面请求的头，那前端可以这样写：

resolve: {
  pageHeaders: ['$http', function($http) {
    return $http.get('/api/get-page-headers').then(response => response.data);
  }]
}

然后在控制器中注入pageHeaders即可使用。

内容的提问来源于stack exchange，提问作者Rajakumar R I