Angular How to check HttpRequest object to set proper content-type for headers?

Question

My team is working for some time on rewriting front-end of our application to Angular. Everything was going more or less smoothly until I encountered file importing views. Our default HttpHeaderEnricherInterceptor is setting default Content-Type as application\json. It works well in the whole application but while trying to import any file all I get is 415. However, if I remove .set('Content-Type', 'application/json') importing is working properly... but all other components are failing. I was trying to make some if statements based on HttpRequest params but it doesn't recognize has() method and some others that I've tried.

I know that final option to solve this is to set content-type on each request but it's something I would like, better avoid it as we decided to try finding global solution to the problem.

Here's my intercept() code:

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

@Injectable()
export class HttpHeaderEnricherInterceptor implements HttpInterceptor {

  constructor(private tokenService: TokenService) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log(`${req.url}?${req.params.toString()}`);

    const changedReq = req.clone(
      {headers:  req.headers
        .set('Authorization',  this.tokenService.getToken() || '')
        .set('Content-Type', 'application/json')
      });
    return next.handle(changedReq);
  }
}

Thanks for any tips!

angular serializes the object and sets the content type header to json by default when posting/putting an object. Setting it in an interceptor is useless. The client code, sending the request, should specify the appropriate content type (if needed). The interceptor can't possibly guess what is being sent. — JB Nizet
– JB Nizet, Commented Oct 17, 2017 at 16:59
Well that's something that's something that was I was afraid to hear. However thanks for the quick response, I'll watch on the thread suggested by @kemsky and Angular team to see if there will be any further improvment in that matter. — Macryo
– Macryo, Commented Oct 19, 2017 at 6:59

kemsky · Accepted Answer · 2017-10-17 16:54:41Z

1

Looks like there is already opened issue on Github: https://github.com/angular/angular/issues/19730

Workarounds are possible but ugly, i.e. global boolean flag switching before and after call, adding fake header as indicator i.e.:

if(headers.get('X-Set-Content-Type') != null){
    headers.set('Content-Type', 'application/json')
}

answered Oct 17, 2017 at 16:54

kemsky

15.4k3 gold badges37 silver badges53 bronze badges

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

1 Comment

Macryo Over a year ago

Thanks for the response. We will probably stick to defining content type on post. However thanks for the thread link, I'll keep an eye on it.

Collectives™ on Stack Overflow

Angular How to check HttpRequest object to set proper content-type for headers?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related