Angular 5请求ASP.NET Web API时请求头缺少Content-Type问题

我注意到你在Angular 5中实现OAuth 2.0密码模式获取令牌的代码里存在几个关键问题，这会导致ASP.NET Web API服务器无法正确解析你的请求。下面是修正方案和详细解释：

代码中的问题点 #

• 请求头格式错误：Angular 5的Http.post方法要求headers参数是Headers（或对应版本的HttpHeaders）实例，而非直接传递普通对象。
• 参数拼接错误：你使用了HTML实体&分隔参数，服务器无法识别该格式，应直接使用&。
• 参数编码风险：手动拼接URL参数容易引发特殊字符（如用户名/密码中的空格、@等）编码错误，导致请求失败。

修正后的完整代码 #

首先确保导入必要的模块：

import { Http, Headers, URLSearchParams } from '@angular/http';

然后修改userAuthentication函数：

userAuthentication(userName: string, password: string) {
  // 使用URLSearchParams构建表单参数，自动处理编码和分隔符
  const params = new URLSearchParams();
  params.append('username', userName);
  params.append('password', password);
  params.append('grant_type', 'password');
  params.append('client_id', 'JCWebApp');

  // 创建符合要求的请求头
  const headers = new Headers({
    'Content-Type': 'application/x-www-form-urlencoded'
  });

  // 发起POST请求，将参数转为字符串格式
  return this.http.post(`${this.rootUrl}/login`, params.toString(), { headers: headers });
}

额外注意事项 #

1. 确认ASP.NET Web API的OAuth配置已开启密码模式（grant_type=password），且client_id=JCWebApp已在服务器端正确注册。
2. 若你的Angular项目使用的是HttpClient（Angular 4.3+推荐），需调整为HttpHeaders和HttpParams：

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

// 对应函数修改
userAuthentication(userName: string, password: string) {
  const params = new HttpParams()
    .set('username', userName)
    .set('password', password)
    .set('grant_type', 'password')
    .set('client_id', 'JCWebApp');

  const headers = new HttpHeaders({
    'Content-Type': 'application/x-www-form-urlencoded'
  });

  return this.http.post(`${this.rootUrl}/login`, params.toString(), { headers: headers });
}

内容的提问来源于stack exchange，提问作者Tuấn Minh