Angular-Ionic HttpClient Post请求Asp.net Api返回400但Swagger返回200/401

• 核对接口参数名一致性
  检查后端登录接口接收的参数字段名，是否与前端传入的username、pw完全匹配（包括大小写）。比如后端模型如果定义的是UserName或Password，前端传的username、pw就会导致后端无法正确绑定参数，触发400错误。可以对照Swagger里的请求示例字段名来确认。

• 修正请求头的标准写法
  将请求头里的content-Type改为标准的Content-Type（首字母大写），虽然部分服务器兼容小写，但严格遵循HTTP标准可以避免潜在的解析问题：

  httpOptions = {
    headers: new HttpHeaders({ 
      'Content-Type': 'application/json', 
      'Accept': '*/*' 
    })
  };
  

• 查看后端返回的具体错误信息
  在请求中添加错误捕获逻辑，打印完整的错误响应内容，后端通常会返回详细的验证失败原因：

  import { catchError, throwError } from 'rxjs';
  
  // ...
  
  login(credentials: {username: string; pw: string}): Observable<any> {
    return this.http.post('https://localhost:7206/auth/login', credentials, this.httpOptions)
      .pipe(
        catchError(err => {
          console.error('登录错误详情:', err.error); // 打印后端返回的错误内容
          return throwError(() => err);
        })
      );
  }
  

  通过控制台输出的错误信息，能直接定位是哪个字段不符合要求，比如必填项缺失、格式不正确等。

• 确认请求体的序列化格式
  检查Swagger测试时使用的请求体格式：如果Swagger是通过form-data或x-www-form-urlencoded发送的，而前端用了JSON格式，就会导致不匹配。这种情况下需要修改前端的请求头和参数序列化方式，比如改用application/x-www-form-urlencoded：

  httpOptions = {
    headers: new HttpHeaders({ 
      'Content-Type': 'application/x-www-form-urlencoded', 
      'Accept': '*/*' 
    })
  };
  
  // 将参数转换为表单格式
  const body = new URLSearchParams();
  body.set('username', credentials.username);
  body.set('pw', credentials.pw);
  
  return this.http.post('https://localhost:7206/auth/login', body.toString(), this.httpOptions);
  

• 检查后端模型验证规则
  确认后端登录请求的模型是否有严格的验证规则，比如[Required]、[MinLength]等注解。如果前端传入的参数不满足这些规则（比如密码长度不够），后端会返回400错误，这时候需要对照后端的验证要求调整前端的输入逻辑。

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