在 AngularJS 中设置应用程序范围的 HTTP 标头答案

【问题标题】：Setting application wide HTTP headers in AngularJS在 AngularJS 中设置应用程序范围的 HTTP 标头
【发布时间】：2012-12-20 10:03:55
【问题描述】：

有没有办法在angular.module('myApp', []).config() 之外设置$httpProvider 标头？

我在登录用户后从服务器获取了一个 Auth-Token，我需要将它作为 HTTP 标头添加到所有后续请求中。

【问题讨论】：

标签： javascript mvvm angularjs

【解决方案1】：

$http.defaults.headers.common['Auth-Token'] = 'token';

似乎headers() 规范了键名。

【讨论】：

您能否详细说明规范化键名的含义？
使用 headers() 方法获取标头时，密钥“Auth-Token”变为小写并变为“auth-token”。这令人困惑。
@lucassp 可能是这个 - stackoverflow.com/questions/5258977/…

【解决方案2】：

您可以为角度 1.0.x 使用默认标题：

$http.defaults.headers.common['Authentication'] = 'authentication';

或 Angular 1.1.x+ 的请求拦截器：

myapp.factory('httpRequestInterceptor', function () {
  return {
    request: function (config) {

      // use this to destroying other existing headers
      config.headers = {'Authentication':'authentication'}

      // use this to prevent destroying other existing headers
      // config.headers['Authorization'] = 'authentication';

      return config;
    }
  };
});

myapp.config(function ($httpProvider) {
  $httpProvider.interceptors.push('httpRequestInterceptor');
});

由于工厂/服务是单例的，因此只要在服务实例化后不需要动态更改“身份验证”值即可。

【讨论】：

我喜欢这项服务。谢谢！
有点困惑。如何将其集成到我的应用程序中？我是否需要将其列为依赖项，然后使用$httpProvider 而不是$http？
将 $httpProvider 注入到你的应用模块挂起的配置方法中。 Providers 是一种在服务被 Angular 注入控制器之前配置服务的方式。
@AakilFernandes 这只是一个配置。可以直接注入$http。
这很奇怪。当我使用 $http.defaults.headers.common 时，我收到错误 405（不允许使用方法）。我不确定这里的问题是否是 webapp2。

【解决方案3】：

添加到@Guria 和@Panga 的上述回复

config.headers['X-Access-Token'] = $window.sessionStorage.token;

可以在标头中使用 x-access-token 作为 JWT(jsonwebtoken)。当用户第一次进行身份验证时，我将 JWT 存储在会话存储中。

【讨论】：