无法从 Angular HTTP 拦截器获取请求标头值

Question

In an Angular application, I use an interceptor to inject the token (when needed) into the request headers. I also need it to modify the Content-Type header to the appropriate one. By default, it must be application/json , but there is a call that needs to upload a ZIP file, so I want to let the Content-Type header as is (for these cases, it's something like: Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryvamnUWepE840OEuq ). I use this code:

    intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        let usr = this.userService.getActualUser();
        let confirmationToken = '';
        let credentials = false;
        let contentType = 'application/json';
        
        // Check if the incoming request has an specific content type header
        if (req.headers.has('Content-Type')) {
          contentType = req.headers.get('Content-Type');
        }
    
        // ETC
    }

The problem is that req.headers.has('Content-Type') always returns false , so I'm setting the wrong type and the call fails. What am I doing wrong?

Thanks in advance!

Answer 1

I believe the content of your form is an instance of the FormData object? If so,

if(req.body instanceof FormData)

This check might help you or give you some hints if you are unable to access the headers. Or maybe you could even dive deeper and check into the req.body object to do a check that is more specific.

Answer 2

During your request, you would expect to see the content-type but you won't unless you directly specify this.

If you have this on your request, you will see the content type.

return this.http.get(this.ENDPOINT, {
      headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
})

This, however, could be an overkill.

Another possible solution is to check the instance type of the body and then set the headers accordingly

if (req.body instanceof FormData) {
    contentType = 'multipart/form-data';
}

Answer 3

Following your advices, I came up with a very simple solution, that is leave the Content-Type header as is if the request body is form data, and set is as JSON for the rest. Something like:

    if(!(req.body instanceof FormData)) {
      contentType = 'application/json';
    }

Cheers!