php - Skicka data från Angular-applikation till API via HTTP POST

Jag försöker skicka ett enskilt objekt från min Angular 5-applikation till en PHP-API i JSON-format med HTTP POST, men jag får det inte att fungera. Jag vet att detta kan vara väldigt grundläggande, men jag är ny på detta ämne och Google kan inte hjälpa mig eller så söker jag inte med rätt nyckelord.

Fel :

1: Med httpOptions-parameter i data.service.ts -> http post-metod

2: Utan httpOptions-parameter i data.service.ts -> http post-metod Rad 55 i php-filen är denna: $name=$_POST["name"]; Jag har också markerat den i filen.

3: Nätverk

Jag förstår inte varför jag får "405 not allowed Method Error" när jag lägger till Content-Type-headern: application/json (Fel 1). Om jag tar bort den visas inte felet men ingen data kommer fram till API:et (Fel 2).

Content Type-headern anges i PHP-filen för API:et. POST-metoden tillsammans med andra tillåts också i PHP-filen.

Jag testade API:et med Restlet Client. Det fungerade med Content-Type: application/x-www-form-urlencoded men inte med application/json:

json

x-www-form-urlencoded

Vad gör jag för fel?

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

data.service.ts -> fullständig fil

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 -> fullständig fil

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

HTML-formulär

<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>

Svar #1

har du provat det här?

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

$name = $obj['name']

från: Läsa JSON POST med PHP

Svar #2

försök att ändra detta, du missade S för OPTIONS-metoden, och lägg till HEAD-metoden:

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

När du anropar CORS-förfrågningarna skickar webbläsaren en OPTIONS-förfrågning till servern för att veta vilka metoder som är tillåtna. Detta kallas: Preflight-förfrågning