Angular 6中application/x-www-form-urlencoded请求体编码异常问题

这个坑我当初踩过！你设置了Content-Type: application/x-www-form-urlencoded没错，但Angular的HttpClient有个默认行为：只要你传入的请求体是普通JS对象，它就会自动序列化为JSON格式，完全忽略你设置的Content-Type头，这就是为什么你在开发者工具里看到的还是JSON格式的请求体。

要让请求体正确编码成username=xxx&password=xxx的格式，有两种常用的解决方法：

方法一：使用HttpParams构建请求体 #

这是Angular官方推荐的方式，HttpParams会自动帮你处理编码，避免手动拼接的麻烦：

首先要导入HttpParams：

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

然后修改你的login方法：

private url = "http://localhost/login.php"; 
private httpOptions = { 
  headers: new HttpHeaders({ 
    'Content-Type': 'application/x-www-form-urlencoded' 
  }) 
}; 

constructor(private http: HttpClient){} 

login(email: string, password: string){ 
  // 用HttpParams构建请求体，注意它是不可变对象，每次set都要重新赋值
  const requestBody = new HttpParams()
    .set('username', email)
    .set('password', password);

  return this.http.post(this.url, requestBody, this.httpOptions); 
}

方法二：手动拼接URL编码字符串 #

如果你更喜欢手动控制，可以直接拼接成符合格式的字符串，记得用encodeURIComponent处理特殊字符（比如邮箱里的@、密码里的特殊符号）：

login(email: string, password: string){ 
  const requestBody = `username=${encodeURIComponent(email)}&password=${encodeURIComponent(password)}`;
  return this.http.post(this.url, requestBody, this.httpOptions); 
}

两种方法都能让请求体以application/x-www-form-urlencoded的格式发送，后端就能正常通过$_POST获取到username和password参数了。

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