title: Change Content-Type for certain requests in Angular 6
body: <p>I have an Angular 6 application that makes API calls to a Node/Express server. I'm using an HTTP interceptor to add a couple of headers the app needs, and also it sets the 'Content-Type' to 'application/json' as all the requests expect JSON data. The new header looks like this:</p>
  
  <pre><code>newHeader = {
      withCredentials : true,
      headers: new HttpHeaders ({
        'Content-Type':  'application/json',
        'X_TOKEN_AUTH': authToken,
        'X_IDUSER': user_id
      })
    };
  </code></pre>
  
  <p>But now I need to upload images to the backend, so one of the routes of the server must expect non JSON data coming in the body.</p>
  
  <p>What I want to do is:</p>
  
  <p>*In the Angular app, add the right header to the POST request, like this:</p>
  
  <pre><code>const url = `${SERVER_URL}/fileupload`;
  const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type':  'application/x-www-form-urlencoded'
    })
  };
  
  return this.httpClient.post(url, formData, httpOptions)
  </code></pre>
  
  <p>*In the HTTP interceptor, check if the request has a 'Content-Type' header. In that case, use it instead of the default 'application/json'. In the interceptor I've logged the headers in the request it receives:</p>
  
  <pre><code>intercept (req: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
    [....]
  
    console.log('HTTP REQ:', req.headers);
  }
  </code></pre>
  
  <p>And this is what it prints:</p>
  
  <p><a href="https://i.stack.imgur.com/WLuL3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WLuL3.png" alt="enter image description here"></a></p>
  
  <p>As you can see, there's nothing related to the headers. What could be wrong?</p>
  
  <p>Thanks in advance,</p>