title: Access token request results in 302 in Angular HttpClient
body: <p>I'm trying to authenticate requests for WordPress rest-api using grant type <code>password</code>. OAuth2 authentication in WordPress is provided by <a href="https://wordpress.org/plugins/oauth2-provider/" rel="nofollow noreferrer">WP OAuth Server</a> plugin.  </p>
  
  <p>When I request access token using Postman Chrome app the server responds with expected access token object but the similar request doesn't work in Angular. It gives status 302 and due to xhr redirect to login page, I'm not able to get access token object. I'm using Angular 5.</p>
  
  <p>Here's how I request access token in Angular:</p>
  
  <pre><code>/* Example token url
    AuthProvider.TOKEN_URL: 
    https://www.example-wordpress.com/oauth/token
  */
  
  const body = {
    grant_type: 'password',
    username: username,
    password: password,
  };
  
  const headers = new HttpHeaders()
    .set('Authorization', 'Basic ' + btoa(AuthProvider.CLIENT_ID + ':' + AuthProvider.CLIENT_SECRET));
  
  this.http.post(AuthProvider.TOKEN_URL, body, { headers: headers });
  </code></pre>
  
  <p>The above request produces 302 with location header set to:</p>
  
  <pre><code>https://www.example-wordpress.com/login/?redirect_to=https%3A%2F%2Fwww.example-wordpress.com%2Foauth%2Ftoken
  </code></pre>
  
  <p>And then a xhr GET request is made to above location which responds with HTML of login page and hence no access token is obtained.</p>
  
  <p>The similar POST request for access token in Postman works fine and results in expected access token object but I can't get it to work in Angular.</p>
  
  <p><strong>EDIT</strong><br>
  While debugging I generated JavaScript code for access token request from Postman and pasted in console of Chrome after importing jQuery.
  The request works as expected in console as well and no redirection occurs. The response is JSON with access token.</p>
  
  <p>Here's the code Postman generated for the POST request:</p>
  
  <pre><code>var settings = {
    "async": true,
    "crossDomain": true,
    "url": "https://example-wordpress.com/oauth/token",
    "method": "POST",
    "headers": {
      "content-type": "application/x-www-form-urlencoded",
      "authorization": "Basic M0wzakE3d080VmxxbXB0UUF1dUI5RkxicWxmeE8yR25Zdk4xQmxvbTp4TktTYnJ1Mno5cEp2VDFMbTNGNFhEQm10eDZzUGsya1FqZDg3VmQ2",
      "cache-control": "no-cache",
      "postman-token": "46339abe-2d1a-1032-f5d8-36e3193d9a81"
    },
    "data": {
      "grant_type": "password",
      "username": "my-username",
      "password": "my-password",
      "client_id": "3L3jA7wO4VlqmptQAuuB9FLbqlfxO2GnYvN1Blom",
      "client_secret": "xNKSbru2z9pJvT1Lm3F4XDBmtx6sPk2kQjd87Vd6"
    }
  }
  
  $.ajax(settings).done(function (response) {
    console.log(response);
  });
  </code></pre>
  
  <p>And here's the response logged from above code:</p>
  
  <pre><code>{
    access_token: "rksen3p351fj0povsrpfv2eeuahrciglc3ilphhy",
    expires_in: 3600, 
    token_type: "Bearer",
    scope: "basic",
    refresh_token: "fudju8tecbnwly2e1xgfv92tykvpsniwkfpvrd7d"
  }
  </code></pre>
  
  <p>I'm unable to figure out why redirection occurs when we request through Angular and not responds with access token JSON.  </p>
  
  <p>Any help is appreciated.</p>