title: Angular2 HTTP - Providing a non-empty HTTP content-type header *Safari*
body: <p>So I'm using the <a href="https://www.dropbox.com/developers/documentation/http/documentation" rel="nofollow noreferrer">Dropbox HTTP API</a> with my Angular2 App. I can log in, authorise, and use the <code>list_folder</code> requests etc., this all works as expected.<br>
  But when I attempt to perform a simple post request to <code>files/download</code> I get an error saying I've provided a non-empty <code>content-type</code>:</p>
  
  <pre><code>Error in call to API function \"files/download\": You provided a non-empty HTTP \"Content-Type\" header (\"text/plain;charset=UTF-8\").
  </code></pre>
  
  <p>This is my current code - I've tried it many different ways and I'm not setting the <code>content-type</code> anywhere.</p>
  
  <pre><code>let headers = new Headers();
  let url = 'https://content.dropboxapi.com/2/files/download';
  
  headers.append('Authorization', `Bearer &lt;inserted-bearer-here&gt;`);
  headers.append("Dropbox-API-Arg", "{\"path\": \"/Documents/code/convert.js\"}");
  
  console.log(headers);
  
  // this is an RxJS observable which is subscribed to later in my code...
  return this.http.post(url, null, { headers: headers });
  </code></pre>
  
  <p>The <code>content-type</code> is definitely not set since I log the headers to the console before sending them:</p>
  
  <p><a href="https://i.stack.imgur.com/Zg1eu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Zg1eu.png" alt="Logged headers variable"></a></p>
  
  <p>Anyone able to shed some light on this problem? I looked through other questions on SO and only found incorrectly set <code>content-type</code> fields etc., nothing where they weren't set and it wasn't working.</p>
  
  <p><strong>-- Edit --</strong></p>
  
  <p>This code works correctly in Chrome:</p>
  
  <pre><code>let headers = new Headers({
    'Authorization': `Bearer ${this.userData.bearer}`,
    'Dropbox-API-Arg': "{\"path\": \"/Documents/code/convert.js\"},
    'content-type': null
  });
  http.post(url, null, { headers: headers })
      .subsribe(...);
  </code></pre>
  
  <p>However, in Safari it seems that if the <code>Content-Type</code> is <code>null</code> it automatically appends <code>text/plain;charset=UTF-8</code></p>
  
  <p>I can't seem to find a way to force-sending an empty http header.. If anyone knows the answer to this problem / or a polyfill / fix for Safari that would be absolutely amazing!</p>