Angular 5中OAuth2.0 Basic Auth POST请求返回401未授权，求AccessToken获取方案

我来帮你定位这个401未授权的问题，先从你的代码片段里找几个关键的问题点：

1. 请求体参数传递位置错误 #

你当前把HttpParams放在了请求选项的params属性里，但对于application/x-www-form-urlencoded类型的请求，OAuth2的token接口要求这些参数（username、password、grant_type）是放在POST请求体里的，而不是URL的查询参数。

Angular的HttpClient.post方法签名是：
post(url: string, body: any | null, options?: { ... })
你之前的写法把请求体和选项搞混了，这会导致后端无法正确获取到授权参数，直接返回401。

2. Basic认证凭证可能混淆 #

注意：OAuth2密码模式中，Authorization: Basic ...里的凭证应该是客户端的client_id和client_secret，而不是用户的username和password。你这里把用户账号密码同时用在了Basic认证和请求体里，大概率是这里搞混了，后端校验客户端凭证失败就会返回401。

修正后的代码示例 #

// 1. 构建请求体参数（用户的账号密码+授权类型）
const bodyParams = new HttpParams()
  .set("username", "your_user_name")
  .set("password", "your_user_password")
  .set("grant_type", "password");

// 2. 构建请求头：Basic认证用客户端的clientId和clientSecret
const httpHeaders = new HttpHeaders({
  "Content-Type": "application/x-www-form-urlencoded",
  "Authorization": "Basic " + btoa("your_client_id:your_client_secret")
});

// 3. 发起POST请求：body参数直接传bodyParams，选项里传headers
return this._http.post(
  `${API_URL}/oauth/token`,
  bodyParams.toString(), // 必须转成字符串，否则Angular可能不会正确编码
  { headers: httpHeaders }
);

额外排查点 #

• 确认后端的OAuth2配置是否开启了密码模式（grant_type=password）
• 检查client_id和client_secret是否和后端配置一致，btoa编码是否正确（注意不要有多余的空格）
• 用Postman先测试一遍接口，确认接口本身可以正常返回token，排除后端配置问题

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