title: Angular 4, XHR Failed loading: POST
body: <p>I've followed this article to develop a token based authenticated back-end service: </p>
  
  <p><a href="http://bitoftech.net/2014/06/01/token-based-authentication-asp-net-web-api-2-owin-asp-net-identity/" rel="nofollow noreferrer">http://bitoftech.net/2014/06/01/token-based-authentication-asp-net-web-api-2-owin-asp-net-identity/</a></p>
  
  <p>This all works as expected and I can authenticate using a winforms app no problems with retrieving the token using restsharp in c#.  Now I've come to develop a web front end using Angular 4 and am trying to modify this:</p>
  
  <p><a href="http://jasonwatmore.com/post/2016/08/16/angular-2-jwt-authentication-example-tutorial" rel="nofollow noreferrer">http://jasonwatmore.com/post/2016/08/16/angular-2-jwt-authentication-example-tutorial</a></p>
  
  <p>to get the token from my back end using this code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> login(username: string, password: string): Observable&lt;boolean&gt; {
  
          let data = "grant_type=password&amp;username=" + username + "&amp;password=" + password;
  
          let headers  = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
          //headers.append('Accept', 'application/json');
  
          let options = new RequestOptions({headers: headers});
  
          return this.http.post('http://localhost:61814/token', data, options)
          .map((response: Response) =&gt; {
              // login successful if there's a jwt token in the response
              let user = response.json();
              if (user &amp;&amp; user.token) {
                  // store user details and jwt token in local storage to keep user logged in between page refreshes
                  localStorage.setItem('currentUser', JSON.stringify(user));
              }
          
              return user;
          })
          
      }</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>login() {
          this.loading = true;
          this.authenticationService.login(this.model.username, this.model.password)
              .subscribe(
                  data =&gt; {
                      this.router.navigate([this.returnUrl]);
                  },
                  error =&gt; {
                      this.alertService.error(error);
                      this.loading = false;
                  });
      }</code></pre>
  </div>
  </div>
  </p>
  
  <p>but nothing happens when I debug in chrome devtools, nothing in network tab and only a XHR failed loading: POST" in the console.</p>
  
  <p>Pretty new to front end development and really struggling with this!</p>