Angular 5无法向服务器提交数据问题求助

嘿，我来帮你搞定这个POST请求的问题！你现在遇到的问题主要是没搞清楚Angular中HttpClient.post()和HttpClient.get()在参数传递上的差异，还有HttpParams的使用误区。

问题分析 #

你原来的代码里，把HttpParams包装成对象传给了POST的第二个参数——但这个参数是请求体（request body），和GET请求里用来拼URL参数的params完全不是一回事。而且还有个隐藏坑：HttpParams是不可变对象，你调用set()之后如果不重新赋值，原来的params根本不会有任何变化！

两种解决方案（根据后端接收格式选择） #

方案1：后端期望接收JSON格式的请求体

如果后端是按JSON格式解析数据，直接把要发送的普通对象作为请求体传进去就行，不用HttpParams：

// 直接构造JSON格式的数据
const requestBody = { action: 'CATEGORY' };

this.http.post(this.url, requestBody).subscribe(res => {
  console.log(res);
  // 注意：Angular 5+的HttpClient默认会自动解析JSON响应，不用再调用res.text()啦
});

方案2：后端期望接收表单编码格式（application/x-www-form-urlencoded）

如果后端要求像GET请求那样的键值对格式（比如传统表单提交的格式），那你需要用HttpParams作为请求体，同时设置正确的请求头，还要注意重新赋值HttpParams：

// 创建HttpParams并赋值（一定要重新接收返回值，因为它不可变）
let params = new HttpParams();
params = params.set('action', 'CATEGORY');

// 设置请求头，告诉后端我们传的是表单编码格式
const headers = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded');

// 把params转成字符串作为请求体，同时传入headers
this.http.post(this.url, params.toString(), { headers }).subscribe(res => {
  console.log(res);
});

为什么GET请求能正常工作？ #

因为GET请求的参数是放在options对象的params属性里的，Angular会自动把这些参数拼接到URL后面，比如：

this.http.get(this.url, { params }).subscribe(...);

这和POST请求把数据放在请求体里的逻辑完全不同，所以你之前的写法在GET里没问题，POST就失效了。

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