title: How to delete a header for a given name in angular?
body: <p>In my app, I'm doing multiple HTTP requests. All of them need an authentication header with an access token (and some other header values). I defined in a header variable of type <code>HttpHeaders</code> (see code#1) to use it like <code>this.http.get(this.myUrl, { headers: this.headers})</code>.<br>
  In my case, the token has to be refreshed over time and I want to change the header to contain the newest token.</p>
  
  <p>In my code, I have a refresh function which should refresh the token and replace the old token in the HTTP header with the new one.<br>
  My first approach was to use the provided <a href="https://angular.io/api/common/http/HttpHeaders#set" rel="nofollow noreferrer">set() method</a>(see code#2). This added a new value to the header and did not replace it (I now had two vales of Authorization).<br>
  My second approach was to use the <a href="https://angular.io/api/common/http/HttpHeaders#delete" rel="nofollow noreferrer">delete() method</a>(see code#3) and delete Authorization and then use the <a href="https://angular.io/api/common/http/HttpHeaders#append" rel="nofollow noreferrer">append() method</a> and a new one. This caused a similar result.<br>
  My last approach was to just use the delete() method(see code#4).</p>
  
  <p><br/></p>
  
  <h3>code samples</h3>
  
  <p>code#1:</p>
  
  <pre><code>headers = new HttpHeaders()
    .set('Content-Type', 'application/json')
    .set('Accept', 'application/json');
  </code></pre>
  
  <p>code#2:</p>
  
  <pre><code>this.headers = this.headers
    .set('Authorization', 'Bearer ' + access_token);
  </code></pre>
  
  <p>code#3:</p>
  
  <pre><code>this.headers = this.headers.delete('Authorization');
  this.headers = this.headers.append('Authorization','Bearer ' + access_token);
  </code></pre>
  
  <p>code#4:</p>
  
  <pre><code>this.headers = this.headers.delete('Authorization','Bearer ' + access_token);
  </code></pre>
  
  <p><br/></p>
  
  <h3>results</h3>
  
  <p>I expected that either the value of the header <code>({'Authorization', 'Bearer ' + access_token})</code> gets replaced (1st approach). The actual result was that it just got appended:</p>
  
  <pre><code>{"Authorization", "Bearer access_token-old"}
  {"Authorization", "Bearer access_token-new"}
  </code></pre>
  
  <p>And for the second approach, I expected to delete and appending a new value which caused to still adding two values:</p>
  
  <pre><code>{"Authorization", undefined}
  {"Authorization", "Bearer access_token-new"}
  </code></pre>
  
  <p>My last approach caused the same output as in my first approach, instead of just replacing the value.<br>
  <br/>
  Do you know any method to just replace the access_token/value in <code>{'Authorization','Bearer ' + access_token}</code>?</p>