Angular HttpClient 中的访问令牌请求结果为 302

Question

我正在尝试使用授权类型 password 对 WordPress rest-api 的请求进行身份验证。 WordPress 中的 OAuth2 身份验证由 WP OAuth Server 插件提供。

当我使用 Postman Chrome 应用程序请求访问令牌时，服务器以预期的访问令牌 object 进行响应，但类似的请求在 Angular 中不起作用。它给出状态 302，并且由于 xhr 重定向到登录页面，我无法获得访问令牌 object。我正在使用 Angular 5.

以下是我在 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 });

上述请求生成 302，位置 header 设置为：

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

然后向上述位置发出 xhr GET 请求，该请求以登录页面的 HTML 响应，因此未获得访问令牌。

在 Postman 中类似的 POST 访问令牌请求工作正常并产生预期的访问令牌 object 但我无法在 Angular.[=17 中使用它=]

编辑
在调试时，我为来自 Postman 的访问令牌请求生成了 JavaScript 代码，并在导入 jQuery 后粘贴到 Chrome 的控制台中。该请求在控制台中也按预期工作，并且没有发生重定向。响应是 JSON 和访问令牌。

这是 Postman 为 POST 请求生成的代码：

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

这是从上面的代码记录的响应：

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

我无法弄清楚为什么当我们通过 Angular 请求并且不使用访问令牌 JSON 响应时会发生重定向。

感谢任何帮助。

Answer 1

access_token（我想这是您期望的）不是 Angular 无需设置服务器即可读取的少数 header 的一部分。

Angular只读"basic"header如Content-type。这是因为默认的 CORS 配置只读取 Cache-Control、Content-Language、Content-Type、Expires、Last-Modified 和 Pragma。当谈到自定义 headers 时，您必须告诉您的服务器公开 headers。

这是通过 Access-Control-Expose-Headers header 完成的。

Answer 2

完全没有问题。这是一个非常非常愚蠢的错误。对不起。

我同时在两个网站上进行测试，并且都具有相似的配置。唯一的区别是一个安装了 OAuth 插件，另一个没有。因此，当我尝试通过未安装 OAuth2 插件的网站授权来自 Angular 的请求时，因此重定向到登录页面。 AuthProvider.TOKEN_URL 的常量设置不正确，而当我使用其他工具进行测试时，我使用的是正确的 url.

不管怎样，这都是我的错。当你不休息时，它有时会发生。 :)

Angular HttpClient 中的访问令牌请求结果为 302

Access token request results in 302 in Angular HttpClient

wordpress

oauth-2.0

angular

angular-httpclient