How to set a null value for "Content-Type" header in Angular interceptor?

Question

I have a specific request in my angular application, where I am uploading an image to the server with image details object. I am having an interceptor for a module's all api requests in the flow to append some common information for server, but for this specific request, I don't need the Content-Type header to be set as default to application/json.

Angular interceptor is adding application/json by default, now for file upload request, if I set:

"Content-Type": null
"Accept": multipart/form-data

The above works without interceptor when I put it in service method, so How can I modify Content-Type header and set it to null in Interceptor?

The main issue is below:

request.clone({body: examplebodyObject, setHeaders: { 'Content-Type': null }});

null or undefined is not accepted as header value in interceptor, I have also tried to delete the Content-Type header from the request, but still it does not work.

I have below code right now:

request = request.clone({ body: this.someFunction(request, 
otherParam), setHeaders: {
      'Accept': 'multipart/form-data'
    } });
request.headers.delete('Content-Type');

user_3943632 · Answer

You should modify the headers based on the cloned request, and pass the cloned request to next handler.

const clonedReq = request.clone()
clonedReq.headers.delete('Content-Type');
return next.handle(clonedReq);

user_11538889 · Answer

Try the solution in this question How to add multiple headers in Angular 5 HttpInterceptor

Skip Content-Type like this:

  const newReq = req.clone({
    body: examplebodyObject,
    headers: new HttpHeaders({
      Accept: 'multipart/form-data'
    })
  });

How to set a null value for "Content-Type" header in Angular interceptor?

2 Answers