AngularJS 作为一款经典的前端 JavaScript 框架，在处理 HTTP 请求时提供了灵活的配置方式，其中请求头信息的设置是控制请求行为、实现身份验证、内容协商等关键功能的重要手段，本文将系统介绍 AngularJS 中请求头信息的配置方法、常见应用场景及最佳实践，帮助开发者更好地理解和运用这一功能。
AngularJS 请求头基础配置
AngularJS 通过内置的服务处理 HTTP 请求，其核心方法
$http(config)
中的对象支持属性，用于自定义请求头信息。属性可以接受两种主要形式：普通对象或对象实例（由
$httpProvider
提供）。
使用普通对象设置请求头
最简单的方式是直接在对象中定义属性，键为请求头名称，值为对应内容。
$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 提供了、、、、等属性，分别对应不同 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({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
通过方法在每个请求发送前动态添加
Authorization
头，并通过
responseError
方法统一处理错误，实现了请求头与业务逻辑的解耦。
常见请求头类型及应用场景
合理设置请求头是确保 API 正常交互的关键，以下列举几种常见请求头及其典型应用场景：
| 请求头名称 | 作用说明 | 典型应用场景 |
|---|---|---|
Content-Type
|
指定请求体的媒体类型，服务器据此解析请求内容 |
application/json
（REST API）、
application/x-www-form-urlencoded
（表单提交）
|
Authorization
|
包含身份验证信息，如 Bearer Token、Basic Auth 等 | 用户登录后的 API 访问权限控制 |
| 声明客户端可处理的响应内容类型，实现内容协商 | 服务器支持多格式响应（如 JSON、XML）时，客户端指定返回格式 | |
X-Requested-With
|
标识请求为 AJAX 请求，常用于后端区分普通请求和异步请求 | Spring MVC 等框架中用于拦截 AJAX 请求 |
If-Modified-Since
|
条件请求头，若资源未修改则返回 304 状态码，减少数据传输 | 静态资源缓存、数据增量更新 |
Cache-Control
|
控制请求/响应的缓存行为，如、等 | 防止浏览器缓存敏感数据、优化性能 |
跨域请求与 CORS 支持
在前后端分离架构中,跨域资源共享（CORS）是必须处理的问题，AngularJS 默认会在请求中添加和
X-Requested-With
请求头，服务器需通过响应头允许跨域访问：
请求头管理的最佳实践
AngularJS 的请求头管理功能虽然基础，却是实现前后端交互的重要环节，从简单的静态配置到基于拦截器的动态管理，开发者可根据项目需求选择合适的方式，通过合理设置请求头，不仅能满足 API 的身份验证、内容协商等需求，还能优化请求性能、增强安全性，在实际开发中，结合最佳实践，灵活运用服务和拦截器机制，可以有效提升代码质量和开发效率，为构建健壮的前端应用奠定基础。
发表评论