Angular14调用ASP.NET Core6 WebAPI时如何正确传递API Key

问题背景 #

在Heroku托管的ASP.NET Core 6 WebAPI通过自定义中间件校验请求头中的ApiKey，使用Angular 14调用该API时，尝试过URL拼接ApiKey、HTTP拦截器添加请求头两种方式，均返回“Api Key was not provided”错误。

错误原因分析 #

1. URL拼接方式无效：中间件逻辑是从请求头中读取ApiKey，而非URL查询参数，这种方式完全不匹配校验逻辑，必然失败。
2. 拦截器配置错误：当前拦截器设置的是Authorization请求头（值为ApiKey xxxxx），但中间件要读取的是名为ApiKey的独立请求头，头名称不匹配导致无法识别。

正确实现方案 #

方案1：修复HTTP拦截器（推荐，安全度更高） #

修改Angular拦截器，直接添加名为ApiKey的请求头，与curl示例的请求格式保持一致：

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from '../environments/environment'; // 从环境变量读取ApiKey，避免硬编码

@Injectable()
export class ApiInterceptorService implements HttpInterceptor {

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 克隆请求并添加ApiKey请求头
    request = request.clone({
      setHeaders: {
        ApiKey: environment.apiKey
      }
    });

    return next.handle(request);
  }
}

配套环境变量配置

在src/environments/environment.ts和environment.prod.ts中添加ApiKey配置：

export const environment = {
  production: false,
  apiKey: '你的ApiKey值'
};

方案2：修改中间件支持URL参数（可选，不推荐） #

如果业务需要支持URL参数传递ApiKey，可修改ASP.NET Core中间件，同时校验请求头和URL查询参数：

private const string APIKEYNAME = "ApiKey";
public async Task OnActionExecutionAsync(ActionExecutingContext context, ActionExecutionDelegate next)
{
    string extractedApiKey = null;

    // 优先检查请求头
    if (context.HttpContext.Request.Headers.TryGetValue(APIKEYNAME, out var headerApiKey))
    {
        extractedApiKey = headerApiKey;
    }
    // 请求头不存在时检查URL查询参数
    else if (context.HttpContext.Request.Query.TryGetValue(APIKEYNAME, out var queryApiKey))
    {
        extractedApiKey = queryApiKey;
    }
    // 两者都不存在则返回错误
    else
    {
        context.Result = new ContentResult()
        {
            StatusCode = 401,
            Content = "Api Key was not provided"
        };
        return;
    }

    var appSettings = context.HttpContext.RequestServices.GetRequiredService<IConfiguration>();
    var apiKey = appSettings.GetValue<string>(APIKEYNAME);

    if (!apiKey.Equals(extractedApiKey))
    {
        context.Result = new ContentResult()
        {
            StatusCode = 401,
            Content = "Api Key is not valid"
        };
        return;
    }

    await next();
}

额外注意事项：CORS配置 #

如果Angular前端与API域名不同，需确保ASP.NET Core的CORS配置允许携带自定义ApiKey请求头，否则浏览器会拦截请求头，导致API无法接收。在Program.cs中配置：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAngularOrigin", policy =>
    {
        policy.WithOrigins("你的Angular前端域名，如https://your-angular-app.herokuapp.com")
              .AllowAnyMethod()
              .WithHeaders("ApiKey", "accept"); // 明确允许所需请求头，或用AllowAnyHeader()
    });
});

// 在UseRouting之后、UseAuthorization之前添加CORS中间件
app.UseRouting();
app.UseCors("AllowAngularOrigin");
app.UseAuthorization();

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