Angular 5 HttpClient请求WordPress OAuth2令牌返回302重定向问题

你遇到的核心问题是Angular默认的请求格式和WP OAuth Server期望的不匹配，导致服务器无法识别你的认证请求，进而重定向到登录页面。我们来一步步拆解原因和解决方案：

问题根源 #

Postman和jQuery的请求能正常工作，是因为它们都发送的是application/x-www-form-urlencoded格式的表单数据；而你的Angular代码默认会将请求体序列化为JSON（Content-Type为application/json）。WP OAuth Server的令牌端点并不支持JSON格式的请求参数，所以它无法解析你发送的grant_type、username等参数，最终判定请求未授权，返回302重定向到登录页。

解决方案：调整Angular请求格式 #

你需要修改Angular代码，让请求体以表单编码的形式发送，同时设置正确的Content-Type头。具体代码如下：

import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';

// ... 你的组件/服务代码

getAccessToken(username: string, password: string) {
  // 用HttpParams构建表单编码的请求参数
  const formParams = new HttpParams()
    .set('grant_type', 'password')
    .set('username', username)
    .set('password', password);

  // 设置请求头：Authorization基础认证 + 表单编码类型
  const headers = new HttpHeaders()
    .set('Authorization', 'Basic ' + btoa(`${AuthProvider.CLIENT_ID}:${AuthProvider.CLIENT_SECRET}`))
    .set('Content-Type', 'application/x-www-form-urlencoded');

  // 发送POST请求，注意这里要把formParams转为字符串
  return this.http.post(AuthProvider.TOKEN_URL, formParams.toString(), { headers: headers });
}

// 调用示例
this.getAccessToken('your-username', 'your-password')
  .subscribe(
    (tokenData) => console.log('获取令牌成功:', tokenData),
    (error) => console.error('请求失败:', error)
  );

额外检查项 #

如果修改后还是有问题，可以排查以下几点：

• 确认WP OAuth Server插件已正确配置，允许password授权类型，且令牌端点/oauth/token处于激活状态。
• 检查WordPress是否有安全类插件（比如Wordfence、iThemes Security），这些插件可能会拦截非表单格式的POST请求，需要将/oauth/token加入白名单。
• 验证btoa编码的客户端ID和密钥是否正确，避免因特殊字符导致编码错误（如果包含特殊字符，建议使用更可靠的Base64编码方式，比如引入第三方库处理）。

为什么Postman/jQuery能工作？ #

你对比Postman生成的代码可以看到，它明确设置了content-type: application/x-www-form-urlencoded，并且data是表单键值对，jQuery会自动将其编码为表单格式发送，这正好匹配了WP OAuth Server的要求。

内容的提问来源于stack exchange，提问作者rmbits