Send Data from Angular Application to API through HTTP POST

Question

I am trying to send a single object from my angular 5 apllication to an php API in JSON format With HTTP POST, but i cant get it to work. I know this might be very basic but I am new to this topic and google cant help me or i am not searching the right keywords.

Errors:

1: With httpOptions parameter in data.service.ts -> http post method

2: Without httpOptions parameter in data.service.ts -> http post method Line 55 in the php file is this one: $name=$_POST["name"]; I've also marked it in the file.

3: Network

I do not understand why i get the "405 not allowed Method Error" when i add a the Content-Type Header: application/json (Error 1). If i remove it the error wont show up but no data arrives at the API (Error 2).

The Content Type Header is set in the php file of the API. POST Method along other is also allowed in the php file.

I tested the API with the Restlet Client. it worked with Content-Type: application/x-www-form-urlencoded but also not with application/json:

json x-www-form-urlencoded

What am I doing wrong?

Angular v5 -> package.json
Angularapp -> localhost:4200
API -> localhost:81 Apache

data.service.ts -> full File

const httpOptions = { headers: new HttpHeaders({ 'Content-Type':'application/json' })};

...

saveName(name: Name) {
    const body = JSON.stringify(name.name);
    return this.http.post('http://localhost:81/apitest/src/app/data/name.php', body, httpOptions);
}

API

<?php
// required headers
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTION");
header("Access-Control-Max-Age: 3600");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");

$connection = mysqli_connect('localhost', 'api', 'test', 'apitest');

$request_method = $_SERVER['REQUEST_METHOD'];

    switch($request_method){
    case 'GET':
        if(!empty($_GET['nameId'])){
            $nameId = intval($_GET['nameId']);
            getNames($nameId);
        } else {
            getNames();
        }
        break;
    case 'POST':
        insertNames();
        break;
    case 'PUT':
        updateNames();
        break;
    case 'DELETE':
        deleteNames();
        break;
    default:
        header('HTTP/1.0 405 Method Not Allowed');
        break;
}

function insertNames()
{
    global $connection;
    $name=$_POST["name"]; // LINE 55 | Undefined index: name in [...] on line <b>55</b><br />
    if(isset($_POST['name'])){
        $query="INSERT INTO form SET name='{$name}'";
        if(mysqli_query($connection, $query))
        {
            $response=array(
                'status' => 201,
                'status_message' =>'Name Added Successfully.'
            );
        }else
        {
            $response=array(
                'status' => 400,
                'status_message' =>'Name Addition Failed.'
            );
        }
    }
    else
    {
        $response=array(
            'status' => 400,
            'status_message' =>'Request Body Empty.'
        );
    }
    header('Content-Type: application/json');
    echo json_encode($response);

app.component.ts -> full File

saveName() {
    this.dataService.saveName(this.name).subscribe(
        data => {
          this.getNames();
          return true;
        }, error => {
          console.error('Failed');
        }
    );
  }

HTML Form

<html>
<head>
  <title>API TEST</title>
</head>
<body>
  <form action="data/name.php" method="POST">
    <label for="name">Name: </label>
    <input type="text" name="name" [(ngModel)]="name.name">
    {{name.name}}
    <button name="post" (click)="saveName()">post</button>
  </form>
</body>
</html>

score 3 · Accepted Answer · edited Feb 22 '18 at 17:49

3

did you try this?

$json = file_get_contents('php://input');
$obj = json_decode($json, true);

$name = $obj['name']

from: Reading JSON POST using PHP

edited Feb 22 '18 at 17:49

vpalade

1,427
1
16
20

answered Feb 22 '18 at 15:32

cyberguest

186
1
8

thank you. thats the solution. It worked without the httpOptions in the post method. – unsignedmind Feb 22 '18 at 15:59
I modified my API so it can handle option requests. Now it woks with the httpOptions. thanks you two for the help :) – unsignedmind Feb 22 '18 at 16:07

vpalade · Answer 2 · 2018-02-22T15:12:40.767

2

try to modify this, you missed S for OPTIONS method, and add HEAD method:

header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, HEAD, OPTIONS");

When you invoke the CORS requests, the browser sends the OPTIONS request to the server to know what methods are allowed. This is so-called: Preflighted request

edited Feb 22 '18 at 15:12

answered Feb 22 '18 at 15:04

vpalade

1,427
1
16
20

I still get the second error. If i add the httpOption in the service http post method again i still get the first error – unsignedmind Feb 22 '18 at 15:15

Send Data from Angular Application to API through HTTP POST

2 Answers2