Can't get request headers values from Angular HTTP interceptor

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!

Kunal Karmakar · Accepted Answer · 2020-09-03 15:32:51Z

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.

answered Sep 3, 2020 at 15:32

Kunal Karmakar

5917 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

profanis · Accepted Answer · 2020-09-03 16:00:29Z

1

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';
}

answered Sep 3, 2020 at 16:00

profanis

2,7513 gold badges39 silver badges51 bronze badges

3 Comments

Fel Over a year ago

Hi! I tried this solution but the call ends with an error stating 422 Unprocessable Entity. I think it's because it expects the boundary value... Do you know how could I get this value? Thanks!

Fel Over a year ago

You pointed me to the right direction, the logic I needed was actually quite simple but I needed more coffee today to see it clear :)

profanis Over a year ago

if my answer fulfills your original question, please vote up

Fel · Accepted Answer · 2020-09-04 10:32:51Z

1

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!

edited Sep 4, 2020 at 10:32

answered Sep 4, 2020 at 9:50

Fel

4,89812 gold badges46 silver badges102 bronze badges

Collectives™ on Stack Overflow

Can't get request headers values from Angular HTTP interceptor

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related