title: Angular 2/4 how to add multiple headers to http post
body: <p>I've problem with adding additonal headers to html post. 
  with curl works very well like with postman.
  I can't add Authorization header to post request.</p>
  
  <p>my problem is similar to <a href="https://stackoverflow.com/questions/34464108/angular2-set-headers-for-every-request">https://stackoverflow.com/questions/39408413/angular2-http-post-how-to-send-authorization-header</a> </p>
  
  <p>my code:</p>
  
  <pre><code> getToken(){
  
  let headers = new Headers;
  headers.append('Authorization', 'Basic ' + btoa(Spotify.clientId + ':' + Spotify.clientSecret));
  headers.append('Content-Type', 'application/x-www-form-urlencoded');
  
  let options = new RequestOptions({ headers: headers });
  
  
  let params = new URLSearchParams();
  params.append('grant_type', 'client_credentials');
  
   console.log(
  
    this.http.post(Spotify.tokenUrl, params.toString(), options).subscribe()
  
  )  
  }
  </code></pre>
  
  <p>Now, when I try to get this none of those two headers aren't added</p>
  
  <pre><code>OPTIONS /api/token HTTP/1.1
  Host: accounts.spotify.com
  Connection: keep-alive
  Access-Control-Request-Method: POST
  Origin: http://172.21.7.171:4200
  User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, 
    like Gecko) Chrome/59.0.3071.86 Safari/537.36
  Access-Control-Request-Headers: authorization
  Accept: */ *
  Referer: http://172.21.7.171:4200/
  Accept-Encoding: gzip, deflate, br
  Accept-Language: pl,en;q=0.8,en-US;q=0.6
  </code></pre>
  
  <p>But when I comment Authorization header, Content-Type is added and a get invalid_client with error 400</p>
  
  <pre><code>POST /api/token HTTP/1.1
  Host: accounts.spotify.com
  Connection: keep-alive
  Content-Length: 29
  Accept: application/json, text/plain, */ *
  Origin: http://172.21.7.171:4200
  User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, 
   like Gecko) Chrome/59.0.3071.86 Safari/537.36
  Content-Type: application/x-www-form-urlencoded
  Referer: http://172.21.7.171:4200/
  Accept-Encoding: gzip, deflate, br
  Accept-Language: pl,en;q=0.8,en-US;q=0.6
  </code></pre>
  
  <p>But when I comment Content-Type header and append Authorization I have the same issue like first time - no added header :/</p>
  
  <p>I'have angular 4.2 - installed and upgraded from ng cli</p>
  
  <p>How to add additonal headers to POST? in Postman this work perfect</p>
  
  <p><a href="https://i.stack.imgur.com/0FlhS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0FlhS.png" alt="enter image description here"></a></p>
  
  <p>===== Edited ====
  Thanks for reply, but both solutions don't work </p>
  
  <pre><code>getToken(){
  
  let options = new RequestOptions();
    options.headers = new Headers();
    options.headers.append('Authorization', Spotify.token);
    options.headers.append('Content-Type', 'application/x-www-form-urlencoded')
  
  let params = new URLSearchParams();
  params.append('grant_type', 'client_credentials');
  
   console.log(
    this.http.post(Spotify.tokenUrl, params.toString(), options).subscribe()
  ) 
  }
  </code></pre>
  
  <p>now if I comment 'Authorization' Content-Type is added to Request with AUthorization i none header isn't added and body isn't sent too</p>
  
  <p>========= edited =========</p>
  
  <p>According to this topic <a href="https://stackoverflow.com/questions/34464108/angular2-set-headers-for-every-request">Angular2 - set headers for every request</a> I've created default-request-options.service.ts </p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { BaseRequestOptions, RequestOptions, Headers } from '@angular/http';
  
  @Injectable()
  export class DefaultRequestOptions extends BaseRequestOptions {
  
      private superHeaders: Headers;
  
      get headers() {
          // Set the default 'Content-Type' header
          this.superHeaders.set('Content-Type', 'application/json');
  
          const token = localStorage.getItem('authToken');
          if(token) {
              this.superHeaders.set('Authorization', `Bearer ${token}`);
          } else {
              this.superHeaders.delete('Authorization');
          }
          return this.superHeaders;
      }
  
      set headers(headers: Headers) {
          this.superHeaders = headers;
      }
  
      constructor() {
          super();
  
      }
  }
  
  export const requestOptionsProvider = { provide: RequestOptions, useClass: DefaultRequestOptions };
  </code></pre>
  
  <p>in app.module.ts</p>
  
  <pre><code>import { requestOptionsProvider, DefaultRequestOptions } from './default-request-options.service'
  ...
  providers: [
      requestOptionsProvider
    ],
  </code></pre>
  
  <p>now in my service</p>
  
  <pre><code>import { DefaultRequestOptions } from '../default-request-options.service';
    getToken(){
  
      let params = new URLSearchParams();
      params.append('grant_type', 'client_credentials');
  
      let options = new DefaultRequestOptions();
        //options.headers = new Headers();
       // options.headers.append('Authorization', Spotify.basicCode);
        //options.headers.append('Content-Type', 'application/x-www-form-urlencoded');
        // options.body = params.toString();
        // options.method = 'post';
  
     console.log(
        this.http.post(Spotify.tokenUrl, params.toString(), options).subscribe()
        ) 
  
    }
  </code></pre>
  
  <p>And I have errors still :/ Headers aren't added :/</p>
  
  <p>I've made some investigations, tests. When I try send only 'Content-type=application/x-www-form-urlencoded' I get reply with error 'bad client' because I don't send Authorization. Problem occours when I try to add another header with Authorization.</p>
  
  <p>I've made similar with GET method and I can add only 'Authorization' header, none other. If I added for example "X-Authorization" header that GET method is changed to OPTIONS method like in POST :/</p>
  
  <p>In console I get error:</p>
  
  <blockquote>
    <p>XMLHttpRequest cannot load <a href="https://accounts.spotify.com/api/token" rel="nofollow noreferrer">https://accounts.spotify.com/api/token</a>.
    Response to preflight request doesn't pass access control check: No
    'Access-Control-Allow-Origin' header is present on the requested
    resource. Origin '<a href="http://localhost:4200" rel="nofollow noreferrer">http://localhost:4200</a>' is therefore not allowed
    access.</p>
  </blockquote>
  
  <p>Is there any way to provide more in one header in http post request? </p>
  
  <p>I added only Content-Type header with body. I got reply with 400 code because my request was without Authorization header. In firefox I edited this reqest by adding Authorization to headers and I got what I wanted code 200 with token :)
  So the problem is with Angular not with browser.</p>
  
  <p>==== EDITED ====
  Spotify says that i shouldn't use clientid and client+secret. i should use this:</p>
  
  <pre><code> let options = new RequestOptions()
        options.headers = new Headers();
        options.params = new URLSearchParams();
        options.params.append('client_id', Spotify.clientId);
        options.params.append('redirect_uri', 'http://localhost:4200/callback');
        options.params.append('scope', 'user-read-private user-read-email');
        options.params.append('response_type', 'token');
        options.params.append('state', '789935');
  
  this.http.get('https://accounts.spotify.com/authorize', options )
          .subscribe(
            res=&gt; {
              console.log('res',res)
            }
          )
  </code></pre>
  
  <p>now i get 200 but callback isnt displayed. in console i have:</p>
  
  <pre><code>XMLHttpRequest cannot load https://accounts.spotify.com/authorize?client_id=2100FakeClientId45688548d5a2b9…scope=user-read-private%20user-read-email&amp;response_type=token&amp;state=789935. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.
  </code></pre>
  
  <p>and this comes from "callback:1"</p>
  
  <p>I've made route for callback and callbackComponent</p>
  
  <pre><code>import { Component } from '@angular/core';
  // import { AuthService } from './auth.service';
  
  @Component({
    template: `&lt;h2&gt;callback&lt;/h2&gt;`
  })
  export class CallbackComponent {
  
  }
  </code></pre>
  
  <p>but in console I've error still :/</p>
  
  <pre><code>localhost/:1 XMLHttpRequest cannot load https://accounts.spotify.com/authorize?client_id=21006d1ceeFakeClient548d5a2b9…scope=user-read-private%20user-read-email&amp;response_type=token&amp;state=789935. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.
  </code></pre>
  
  <p>but this time this comes from 'localhost/:1</p>
  
  <p>In postman I het full html to redirect. How can I make this redirection in Angular 2</p>