Angular HTTPClient ignores headers

Question

For some reason my headers are being ignored when the request is made.

(below is a trimmed version of what I am doing)

let headers = new Headers();

headers = headers.set('Content-Type', file.mime);
headers = headers.set('X-Blah', "Test");

return this.httpClient.put<HttpEvent<Blob>>(`${encodeURIComponent(file.name)}`, {
   data: file,
   responseType: "blob",
   observe: "events",
   headers: headers,
   withCredentials: this.configuration.withCredentials
});

What I notice when using the dev tool is that the [HTTPHeaders] headers object is only putting the new header into the lazyUpdate property/map.

There is currently a HTTPInterceptor in place, which when fires, the request object contains none of the headers that I set in the request.

It's been checked over and over and everything is correct for the request, the headers are in the Object (although in that lazyUpdate map), but for the some unknown reason they just seem to be ignored in the request. As such, the request is having it's Content-Type property overridden since it thinks there is none there.

Any thoughts?

Answer 1

Seems that the documentation that I have been working on were wrong. It had to do with the this.httpClient.put(url, body, options) method....seems I was working on the understanding that the body parameter was optional, which it's not.

So the last call should have passed the Blob as the second parameter, and kept the options as the third parameter...

return this.httpClient.put<HttpEvent<Blob>>(`${encodeURIComponent(file.name)}`, file, {
   responseType: "blob",
   observe: "events",
   headers: headers,
   withCredentials: this.configuration.withCredentials
});