將標頭添加到Yeoman創建的AngularJS應用程序中的所有請求中

Question

我剛剛使用Yeoman構建了我的第一個AngularJS應用程序。 我這樣做是這樣的：

$ yo angular frontend

結果，我得到了一堆標准文件夾和文件，例如：

- app
    - images
    - scripts
        app.js
    - styles
    - views
    index.html
    ...
- bower_components
- node_modules
- test

似乎我必須更改app.js文件才能向所有請求添加標頭。 但是我對AngularJs還是陌生的，我不知道該怎么做。 現在，app.js看起來像：

angular
    .module('frontend', [
        ...
    ])
    .config(function($routeProvider){
        $routeProvider
            .when(...)
    });

我想，我需要設置$httpProvider ，但是我該怎么做呢？

Answer 1

您應該為此使用interceptor 。 這是來自AngularJS文檔的推薦方法：

// register the interceptor as a service
$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
  return {
    // optional method
    'request': function(config) {
      // do something on success
      return config;
    },

    // optional method
   'requestError': function(rejection) {
      // do something on error
      if (canRecover(rejection)) {
        return responseOrNewPromise
      }
      return $q.reject(rejection);
    },



    // optional method
    'response': function(response) {
      // do something on success
      return response;
    },

    // optional method
   'responseError': function(rejection) {
      // do something on error
      if (canRecover(rejection)) {
        return responseOrNewPromise
      }
      return $q.reject(rejection);
    }
  };
});

$httpProvider.interceptors.push('myHttpInterceptor');

您需要做的就是實現'request'方法，因為所有方法都是可選的。 提供的配置對象是一個有角度的$http配置對象，它包含一個headers屬性。 您應該能夠輕松地將標頭添加到此：

config.headers.myHeader = myValue;
return config;

您$httpProvider在配置博客中將$httpProvider添加到參數列表中即可：

angular
    .module('frontend', [
        ...
    ])
    .config(function($routeProvider, $httpProvider, $provide){
        $routeProvider
            .when(...)

        // register the interceptor as a service
        $provide.factory('myHttpInterceptor', function() {
          return {
            // optional method
            'request': function(config) {
              config.headers.myHeader = myValue;
              return config;
            },
          };
        });

        $httpProvider.interceptors.push('myHttpInterceptor');
    });

Answer 2

在所有請求中添加標頭的更好解決方案是

app.run(['$http', function ($http) {
   $http.defaults.headers.common['myHeader'] = 'myHeaderValue';
}]);