Setting Angular HttpClient request headers when called with an HttpRequest object

Question

When I want to append headers to a standard get, post, put or delete request, I can easily pass it inside the options object:

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Authorization': 'my-auth-token'
  })
};

this.httpClient.get<any>(
  'http://myapi.com/endpoint',
  httpOptions
)

However, when I am using the request<R>(req: HttpRequest<any>): Observable<HttpEvent<R>>; method of HttpClient, I am unable to pass any headers in anywhere as it doesn't accept any other parameters. I need to make my request this way since I need to append a file object to the body. This is the way I make the call:

this.httpClient.request(
  new HttpRequest(
    'POST',
    'http://myapi.com/endpoint',
    formData, // contains file object
  )
);

Is there a way to work this around?

The headers go in the HttpRequest object itself angular.io/api/common/http/HttpRequest — user184994
– user184994, Commented Jul 28, 2018 at 9:21
You can set it in the constructor. I've added an example below for you — user184994
– user184994, Commented Jul 28, 2018 at 9:36

user184994 · Accepted Answer · 2018-07-28 09:35:55Z

1

According to the docs, you can add the headers into the HttpRequest object itself, like so

new HttpRequest(
  'POST',
  'http://myapi.com/endpoint',
  formData, // contains file object
  {
    headers: myHeaders
  }
)

answered Jul 28, 2018 at 9:35

user184994

18.3k2 gold badges51 silver badges54 bronze badges

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

Collectives™ on Stack Overflow

Setting Angular HttpClient request headers when called with an HttpRequest object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related