Access token request results in 302 in Angular HttpClient

Question

I'm trying to authenticate requests for WordPress rest-api using grant type password. OAuth2 authentication in WordPress is provided by WP OAuth Server plugin.

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.

Here's how I request access token in Angular:

/* 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 });

The above request produces 302 with location header set to:

https://www.example-wordpress.com/login/?redirect_to=https%3A%2F%2Fwww.example-wordpress.com%2Foauth%2Ftoken

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.

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.

EDIT
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.

Here's the code Postman generated for the POST request:

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);
});

And here's the response logged from above code:

{
  access_token: "rksen3p351fj0povsrpfv2eeuahrciglc3ilphhy",
  expires_in: 3600, 
  token_type: "Bearer",
  scope: "basic",
  refresh_token: "fudju8tecbnwly2e1xgfv92tykvpsniwkfpvrd7d"
}

I'm unable to figure out why redirection occurs when we request through Angular and not responds with access token JSON.

Any help is appreciated.

Answer 1

There was no problem at all. It was a very very silly mistake. I apologize.

I was testing with two websites simultaneously and both had similar configuration. The only difference was that one had OAuth plugin installed and other not. So when I tried to authorize the request from Angular with the website which hadn't had OAuth2 plugin installed and so redirected to the login page. The constant set for the AuthProvider.TOKEN_URL was incorrectly set, while when I was testing with other tools I was using correct url.

Anyway, this was all my mistake. It happens sometimes, when you don't take break. :)