AngularJS如何自定义请求头信息？

AngularJS 作为一款经典的前端 JavaScript 框架，在处理 HTTP 请求时提供了灵活的配置方式，其中请求头信息的设置是控制请求行为、实现身份验证、内容协商等关键功能的重要手段，本文将系统介绍 AngularJS 中请求头信息的配置方法、常见应用场景及最佳实践，帮助开发者更好地理解和运用这一功能。

AngularJS 请求头基础配置

AngularJS 通过内置的 $http 服务处理 HTTP 请求，其核心方法 $http(config) 中的 config 对象支持 headers 属性，用于自定义请求头信息。headers 属性可以接受两种主要形式：普通对象或 headers 对象实例（由 $httpProvider 提供）。

使用普通对象设置请求头

最简单的方式是直接在 config 对象中定义 headers 属性，键为请求头名称，值为对应内容。

$http({
  method: 'GET',
  url: '/api/data',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token123'
  }
}).then(function(response) {
  // 处理响应
});

这种方式适用于静态请求头的设置,结构直观，易于理解。

使用 $httpProvider 默认请求头

如果某些请求头需要在全局范围内生效（如 Content-Type、X-Requested-With 等），可以通过 $httpProvider 的 defaults.headers 配置实现，AngularJS 提供了 common、get、post、put、delete 等属性，分别对应不同 HTTP 方法的默认请求头：

angular.module('myApp', [])
.config(function($httpProvider) {
  // 设置全局默认请求头
  $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
  $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
  $httpProvider.defaults.headers.put['Content-Type'] = 'application/json';
});

全局配置可以避免在每个请求中重复设置相同请求头,提升代码复用性。

动态请求头的灵活应用

实际开发中,许多请求头需要根据运行时动态生成，如身份验证令牌、时间戳、签名等，AngularJS 提供了多种方式实现动态请求头的注入。

使用 transformRequest 函数

transformRequest 是 $http 配置中的一个函数，用于在请求发送前对请求体和请求头进行处理，通过它可以动态修改或添加请求头：

$http({
  method: 'POST',
  url: '/api/secure-data',
  data: { username: 'user', password: 'pass' },
  transformRequest: function(data, headersGetter) {
    // 动态添加 Authorization 头
    headersGetter('Authorization') = 'Bearer ' + getToken();
    // 转换请求体格式（如将对象转为 JSON 字符串）
    return angular.toJson(data);
  }
});

headersGetter 是一个函数，通过调用它可以获取当前请求头的值，并支持动态修改。

基于 $http 拦截器的高级管理

拦截器（Interceptor）是 AngularJS 中处理请求和响应的强大工具，通过 $httpProvider 的 interceptors 数组注册，拦截器可以统一管理动态请求头，避免在多个请求中重复编写逻辑：

angular.module('myApp')
.config(function($httpProvider) {
  $httpProvider.interceptors.push('authInterceptor');
})
.factory('authInterceptor', function($q, $window) {
  return {
    request: function(config) {
      // 从 localStorage 获取 token 并添加到请求头
      if ($window.sessionStorage.token) {
        config.headers.Authorization = 'Bearer ' + $window.sessionStorage.token;
      }
      return config;
    },
    responseError: function(rejection) {
      // 处理 401 未授权等错误
      if (rejection.status === 401) {
        $window.location.href = '/login';
      }
      return $q.reject(rejection);
    }
  };
});

上述代码中,authInterceptor 通过 request 方法在每个请求发送前动态添加 Authorization 头，并通过 responseError 方法统一处理错误，实现了请求头与业务逻辑的解耦。

常见请求头类型及应用场景

合理设置请求头是确保 API 正常交互的关键，以下列举几种常见请求头及其典型应用场景：

跨域请求与 CORS 支持

在前后端分离架构中,跨域资源共享（CORS）是必须处理的问题，AngularJS 默认会在请求中添加 Origin 和 X-Requested-With 请求头，服务器需通过响应头允许跨域访问：

• 服务器响应头示例：

  Access-Control-Allow-Origin: *
  Access-Control-Allow-Methods: GET, POST, PUT, DELETE
  Access-Control-Allow-Headers: Content-Type, Authorization

  对于复杂请求（如涉及自定义请求头或非简单方法），浏览器会先发送 OPTIONS 预检请求，AngularJS 会自动处理预检流程，开发者只需确保服务器正确响应 OPTIONS 请求即可。

请求头管理的最佳实践

1. 避免敏感信息暴露
   请求头信息会随请求发送至服务器，应避免在 URL 或非加密请求头中直接传输敏感数据（如密码、Token），建议使用 HTTPS 加密传输。

   

2. 优先使用拦截器
   对于全局性请求头（如身份验证、追踪 ID），通过拦截器统一管理，避免代码冗余，提升可维护性。

3. 遵循 RESTful 规范
   合理使用 Accept、Content-Type 等标准请求头，确保与后端 API 的规范一致，减少兼容性问题。

4. 处理请求头冲突
   当全局默认请求头与单次请求自定义请求头冲突时，单次请求的配置会覆盖全局配置，需注意优先级逻辑。

5. 调试与测试
   使用浏览器开发者工具（Network 面板）检查请求头是否符合预期，确保动态请求头正确注入，同时结合后端日志验证请求头处理逻辑。

AngularJS 的请求头管理功能虽然基础，却是实现前后端交互的重要环节，从简单的静态配置到基于拦截器的动态管理，开发者可根据项目需求选择合适的方式，通过合理设置请求头，不仅能满足 API 的身份验证、内容协商等需求，还能优化请求性能、增强安全性，在实际开发中，结合最佳实践，灵活运用 $http 服务和拦截器机制，可以有效提升代码质量和开发效率，为构建健壮的前端应用奠定基础。