Angular HTTP - Not updating the HTTP request headers

Question

// inject the httpclient
protected _http: HttpClient = inject(HttpClient);


// this is how I create the options
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/tcc'
  }),
  observe: 'response' as const
};


// this is how I am setting the parameters for the requst.
this._http.delete(this._url + operation, httpOptions);

I looked for the request in the developer console and I can see that the request "Content-Type" is still "application/json".

I have tried :

this._http.delete(this._url + operation, { headers: { 'Content-Type': 'application/tcc' } })

I have tried:

const httpOptions = {
  headers: { 'Content-Type': 'application/tcc' },
  observe: 'response' as const
};

I have tried setting it to a different type of header but still no luck, it still showed up as "application/json" in the developer tools:

const httpOptions = {
  headers: { 'Content-Type': 'multipart/form-data' },
  observe: 'response' as const
};

I have tried:

let headers = new HttpHeaders().set('Content-Type', 'multipart/form-data')

Answer 1

As mentioned in the comment, this could be due to your defined HTTP Interceptor that sets default header. In your HTTP Interceptor, I believe that you set the default Content-Type as "application/json".

You can implement the logic that to remain the existing Content-Type if it is set, otherwise default as "application/json".

intercept(req: HttpRequest<any>, next: HttpHandler) {
  const authReq = req.clone({
    headers: req.headers.set('Content-Type', request.headers.get('Content-Type') ?? 'application/json')
  });

  return next.handle(authReq);
}