Angular HttpClient：Post 方法未正确设置参数

Question

在我的方法transmitProject(project: ProjectModel): Observable<boolean> 中有一个通过HttpClient 的发布请求，我想将数据发布到我的后端：

-- 在我的transmitProject-方法中

const params = {
   projectId: project.projectId,
   description: documentation.description,
   // some other attributes ...
};

return this.http.post(this.conf.url, params).pipe(
   map(response => {
      console.log(response);
      return true;
   })
);

...直到这里一切正常。但是请求以 json 格式设置 post 数据。为了测试后端服务器，返回转储的 $_POST 变量 -> null。

请求负载： {projectId：“...”，描述：“...”，经度：10，纬度：10，... }

实际上应该是： projectId=...description=...longitude=10latitude=10...

-> 在 Postman 中一切正常。

Answer 1

这里的问题是Angular默认发送一个JSON类型的post请求。

您要么更改 PHP 后端，而是使用 $_POST 来读取 JSON：

<?
..
$JSON = file_get_contents("php://input");
if (!empty($JSON ))
{
  $params = json_decode($JSON, true); 
}
?>

或者，如果您真的想以x-www-form-urlencoded 转发发送 您可以使用 URLSearchParams 自动将内容类型设置为 application/x-www-form-urlencoded:

let body = new URLSearchParams();
body.set('username', username);
body.set('password', password);

this.http.post(this.loginUrl, body).map(...);

当然，如果你像这样正确编码你的身体，你也可以手动完成

let body = `username=${username}&password=${password}`;

但是您必须手动将标题设置为application/x-www-form-urlencoded。

这样

this.http.post(this.loginUrl, body, { headers: headers }).map(...);

Answer 2

这不是很明显，但你没有以正确的方式使用httpClient。

您可以在this SO post 中找到这种情况的解释。

如果您不想使用 JSON 但想坚持使用x-www-form 编码，您的代码应如下所示：

const body = new HttpParams()
  .set('your property name', ** property value **)
  .set(...);

return this.http.post(this.conf.url,
  body.toString(),
  {
    headers: new HttpHeaders()
      .set('Content-Type', 'application/x-www-form-urlencoded')
  }
).pipe(... same code as you already have ...);