Http headers passed from Angular 8 are not appearing in HttpContext in ASP.NET Core API 3.1

Question

I am passing some header values to my API call in an Angular application:

httpOptions = {
    headers: new HttpHeaders({
      "Content-Type": "application/json",
      "Access-Control-Allow-Origin": "*",
      "xibm-clientid": "Test"
    })
  };


submitSomething(myData: IMyData): Observable<any> {
    return this.httpClient
      .post<any>(apiURL, JSON.stringify(myData), this.httpOptions)
      .pipe(catchError(this.errorHandler));
  }

The request is getting redirected to my backend API (ASP.NET 3.1 Core API) and I am checking the request header as follows:

string apicClientId = context.Request.Headers["xibm-clientid"].ToString();

The header "xibm-clientid" is not present in context.Request.Headers list.

Note:

I am checking this header in a custom middleware rather than in Controller level:

public class CheckHeadersMiddleware
{
    private readonly RequestDelegate _next;
    
    public CheckHeadersMiddleware(RequestDelegate next)
    {
        _next = next ?? throw new ArgumentNullException(nameof(next));
    }

    public async Task Invoke(HttpContext context)
    {
        string apicClientId = context.Request.Headers["xibm-clientid"].ToString();
    }
}

I can read this header when it hits the controller but I don't want to do that because I want to check the header before the controller is called. So why the header is not appearing in the middleware level?

Is something I am missing here?

Answer 1

You can try to use Request.Headers["xibm-clientid"].ToString();.Here is a demo:

angular:

httpOptions = {
    headers: new HttpHeaders({
      "Content-Type": "application/json",
      "Access-Control-Allow-Origin": "*",
      "xibm-clientid": "Test"
    })
  };



    return this.httpClient
      .post<any>("https://localhost:xxx/Api", 1, this.httpOptions);
  }

Api Controller:

[ApiController]
    [Route("[controller]")]
    public class ApiController : ControllerBase
    {
        public IActionResult Index()
        {
            var s = Request.Headers["xibm-clientid"].ToString();
            return Ok();
        }
    }

result:

Update:

Where do you use the middleware?Here is a demo with middleware,and I can get the header(I check the method is post and I check the RequestPath):

middleware:

public class CheckHeadersMiddleware
    {
        private readonly RequestDelegate _next;

        public CheckHeadersMiddleware(RequestDelegate next)
        {
            _next = next ?? throw new ArgumentNullException(nameof(next));
        }

        public async Task Invoke(HttpContext context)
        {
            if (context.Request.Path == "/Api" && context.Request.Method == "POST")
            {
                string apicClientId = context.Request.Headers["xibm-clientid"].ToString();
            }
            await _next(context);
        }
    }

result:

angular send two request,one of the method is option,another is post,only the post request have the header xibm-clientid