Angular应用MSAL认证后无法向Azure函数应用发送x-functions-key头

1. 创建自定义HTTP拦截器 #

新建拦截器类，专门处理自定义请求头的添加和默认头的移除：

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from '../environments/environment';

@Injectable()
export class CustomHeadersInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // 仅对目标API添加x-functions-key
    if (request.url.startsWith(environment.endPoints.WebApiUrl)) {
      request = request.clone({
        setHeaders: {
          'x-functions-key': environment.azureFunctionsKey
        }
      });
    }

    // 移除指定默认请求头
    const unwantedHeaders = ['sec-ch-ua', 'sec-ch-ua-platform', 'sec-ch-ua-mobile'];
    unwantedHeaders.forEach(header => {
      if (request.headers.has(header)) {
        request = request.clone({
          headers: request.headers.delete(header)
        });
      }
    });

    return next.handle(request);
  }
}

2. 配置拦截器执行顺序 #

在app.module.ts的providers数组中，将自定义拦截器注册在MSAL拦截器之后，确保MSAL先完成身份验证头的添加，再由自定义拦截器处理其他头：

import { CustomHeadersInterceptor } from './custom-headers.interceptor';

@NgModule({
  // ...其他模块配置
  providers: [
    // MSAL身份验证拦截器
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
    // 自定义头处理拦截器
    {
      provide: HTTP_INTERCEPTORS,
      useClass: CustomHeadersInterceptor,
      multi: true
    },
    // ...MSAL其他配置（MSALInstanceFactory等）
  ]
})
export class AppModule { }

3. 环境变量配置 #

在environment.ts和environment.prod.ts中添加Azure Functions密钥，避免硬编码：

export const environment = {
  // ...其他环境配置
  azureFunctionsKey: '你的Azure Functions密钥',
  endPoints: {
    WebApiUrl: '你的API地址'
  }
};

关键说明 #

• MSAL Angular拦截器仅负责身份验证相关逻辑（如添加Authorization头），自定义业务请求头需通过独立的HTTP拦截器实现。
• 拦截器按注册顺序执行，将自定义拦截器放在MSAL拦截器之后，确保能修改MSAL处理后的请求。
• 部分默认头（如sec-ch-ua系列）是浏览器自动添加的，前端拦截器尝试删除可覆盖大部分场景，以此简化反向代理配置。

内容的提问来源于stack exchange，提问作者Arash