Angular Http Post sending nothing

Question

I have a simple code that my PHP will look for any item that has the names "prod_name and prod_desc" and print them. This is the code:

    echo ($_POST['prod_name']);
    echo ($_POST['prod_desc']);

    exit;

makeRequest() {
    let data = {
      'prod_name': 'Celphone',
      'prod_desc': 'A Big Ass Celphone'
    }

     let httpOptions = {
       headers: new HttpHeaders({
         'Content-Type': 'application/json'
       }),
       responseType: 'text' as 'json'
     }


    this.http.post('http://localhost:8080/vysor_vendas_online/rest/post.php', data, httpOptions)
        .pipe(
          retry(3),
          tap(console.log),
          catchError(this.errorHandl)
        )
        .subscribe(
          response => console.log(response),
          error => console.error(error)
        )
    }

But the response always is:

<br />
<b>Notice</b>:  Undefined index: prod_name in <b>C:\Fitgroup\ws_fg\www\vysor_vendas_online\rest\post.php</b> on line <b>3</b><br />
<br />
<b>Notice</b>:  Undefined index: prod_desc in <b>C:\Fitgroup\ws_fg\www\vysor_vendas_online\rest\post.php</b> on line <b>4</b><br />

But in the Postman app, the request goes just fine. Look: Postman image

What is the problem??

Answer 1

Your Angular code is using the following HTTP Header :

'Content-Type' : 'application/json'

to describe your payload type to the back-end server, while postman is using a completely different payload type (Form Data), Either change php code to accept raw JSON, or use this npm package to transfer tour object to form data, package