title: How to add headers to my Angular post request?
body: <p>For a school project I need to make a simple login page with Angular. When a login button is clicked I need to add an Authorization header with my post. I created a backend and when I post my Authorization value to that backend with postman it works so nothing wrong with the backend. When I try to post to the same backend with my frontend it doesn't work. What is the best way to add headers to your post? It seems that the opinions are divided. This is my code:</p>
  
  <pre><code>export class LoginComponent{
      title = 'Login';
      email = '';
      password = '';
      credentials = '';
      basic = '';
      constructor(private http:HttpClient){
  
      }
  
      createAuthorizationHeader(headers:Headers,basic){
          headers.append('Authorization',basic);
      }
  
      login(event){
          this.email = (&lt;HTMLInputElement&gt;document.getElementById("email")).value;
          this.password = (&lt;HTMLInputElement&gt;document.getElementById("password")).value;
          this.credentials = this.email + ":" + this.password;
          this.basic = "Basic " + btoa(this.credentials);
          console.log(this.basic);
          let headers = new Headers();
          headers.append('Content-Type','application/json');
          headers.append('Authorization',this.basic);
          let options = new RequestOptions({headers:headers});
          console.log(headers);
          return this.http.post('http://localhost:8000/api/v1/authenticate',options)
          .subscribe(
              res =&gt;{
                  console.log(res);
              },
              err =&gt; {
                  console.log(err.message);
              }
          )
      }
  }
  </code></pre>
  
  <p>When I run that code I get a 400 status response and the headers are not added.</p>