title: VueJs and VueResource, removing header fields from a Ajax request
body: <p>When I instantiate a Vuejs <strong>(2.2.6)</strong> and Vue-resource <strong>(1.2.1)</strong>, I set the header authorization with the following code, this way I can authorize all requests to my API:</p>
  
  <pre class="lang-js prettyprint-override"><code>Vue.http.headers.common.AUTHORIZATION = 'BEARER ...';
  </code></pre>
  
  <p>However, I want to make a request for a third party API, and I do not want the <code>Authorization</code> field to be sent. Additionally, this API does not allow you to use this authorization header.</p>
  
  <pre class="lang-js prettyprint-override"><code>let CEP = '';
  
  this.$http.get('https://viacep.com.br/ws/' + CEP + '/json')
      .then(response =&gt; {
          console.log(response.headers);
      });
  </code></pre>
  
  <p>This way the authorization field is sent with the header, on <strong>Access-Control-Request-Headers</strong>:</p>
  
  <p><a href="https://i.stack.imgur.com/jZtQo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jZtQo.png" alt="Request header"></a></p>
  
  <p>I tried to remove some header fields with the following codes, without success.</p>
  
  <pre class="lang-js prettyprint-override"><code>this.$http.headers.common.AUTHORIZATION = null;
  this.$http.headers.common['Access-Control-Allow-Headers'] = null;
  
  this.$http.get('https://viacep.com.br/ws/' + CEP + '/json')
      .then(response =&gt; {
          console.log(response.headers);
      });
  </code></pre>
  
  <p>In the <code>vue-resource</code> documentation, there is the possibility of inserting an object to force the request configuration, but the documentation isn't  complete.</p>
  
  <pre class="lang-js prettyprint-override"><code>this.$http.get('https://viacep.com.br/ws/' + CEP + '/json', {
     ...here...
  }).then(response =&gt; {
      console.log(response.headers);
  });
  </code></pre>
  
  <p>Is there any way to remove the <em>Authorization</em> field, or any other field  from a given request?<br>
  Thanks.</p>
  
  <p><strong>* UPDATED *</strong></p>
  
  <p>By using the interceptors (as in the below sample) <strong>I can edit</strong> the request but <strong>I can not delete</strong> a particular field.</p>
  
  <pre class="lang-js prettyprint-override"><code>Vue.http.interceptors.push((request, next) =&gt; {
  
      const viacep = request.url.includes('viacep.com.br');
  
      if (viacep) {
          request.headers.set('AUTHORIZATION', 'TRY THIS');
      }
  
      next(response =&gt; {});
  });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/1Me9R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1Me9R.png" alt="editing request"></a></p>
  
  <p>Try to Delete:</p>
  
  <pre class="lang-js prettyprint-override"><code>Vue.http.interceptors.push((request, next) =&gt; {
  
      const viacep = request.url.includes('viacep.com.br');
  
      if (viacep) {
          request.headers.delete('AUTHORIZATION');
      }
  
      next(response =&gt; {});
  });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/NONiM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NONiM.png" alt="enter image description here"></a></p>