Angular 4 HttpClient无法使用POST发送数据答案

【问题标题】：Angular 4 HttpClient Cannot sent data with POSTAngular 4 HttpClient无法使用POST发送数据
【发布时间】：2017-10-10 13:12:23
【问题描述】：

Angular 4.4.4
这是我的应用组件

constructor(
    private http: HttpClient,
)

this.http.post('/api.php', {name, age}).subscribe(data => {
    console.log(data);
});

api.php -> exit(json_encode($_POST));

$_POST 中不接收任何数据

返回 [];

(let xmlRequest = new XMLHttpRequest(); …… 工作正常）

我尝试设置标题

  let headers = new HttpHeaders().set('Content-Type', 'application/json; charset=UTF-8');

不工作

很抱歉这个问题，但我花了 1 天时间仍然找不到解决方案。

ps。客户端和服务器同源。

【问题讨论】：

请发布您的 PHP 方法
退出(json_encode($_POST))
我的意思是，你的签名，你的方法

标签： php angular post httpclient

【解决方案1】：

您需要将参数放入 Angular 端的 FormData 对象中。

const params = new FormData();
params.append('para1', 'value1');
params.append('para2', 'value1');
this.http.post('/api.php', params).subscribe(....)

现在您可以使用 $_POST['para1'] 和 $_POST['para2'] 获取项目 PHP 部分的参数。

我更喜欢这个解决方案，而不是使用 file_get_contents 获取所有内容，因为它对我来说看起来更直接。

【讨论】：

【解决方案2】：

试试吧，希望对你有帮助

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';
import { HttpClient } from '@angular/common/http';


@Injectable()
export class LandingService {

    private apiUrl = 'http://localhost:5000/';

  list:any;
  headers : any;
  constructor(private _http: HttpClient){
        this.headers = new Headers();
        this.headers.append('Content-Type', 'application/json');
  }
     getsearchResponse(searchText){
          this.list ={"sentences":searchText}
          return this._http.post(this.apiUrl+'searchBotsNew',this.list,this.headers)
          .map(res =>res.json())
          .do(data => console.log(JSON.stringify(data)));

      }



}

【讨论】：

有你在 app.module.ts 文件中导入 HttpClientModule 吗？
是的，我做到了。请求发送但服务器不接收数据
你在用php后端吗？

【解决方案3】：

我找到了解决办法。

在 PHP 中，$_POST 只接受表单数据。

使用请求标头“Content-Type: application/json”，您可以使用file_get_contents('php://input');接收它

所以

$_POST = json_decode(file_get_contents('php://input'));

【讨论】：