Ionic Angular HTTP POST请求PHP后无法获取单个JSON字段值

在Ionic Angular应用中使用Angular的HttpClient发起POST请求，将JSON负载传递给PHP文件时，能正常输出完整的JSON数据，但尝试获取单个字段值时会报错。

Angular代码（home.ts）： #

test() {
    let data = {
      firstname: "John",
      lastname: "Wick"
    }

    const headers = new HttpHeaders();
    headers.set('Content-Type', 'application/json; charset=UTF-8');
    headers.set('Access-Control-Allow-Origin', '*');
    headers.set('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');

    this.http.post(this.php_url, data, {headers: headers}).subscribe((res) => {
      console.log("Posted successfully")
      console.log(res);
    }, (err) => {
      console.log(err.error);
    });
  }

PHP代码（index.php）： #

<?php
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Headers: *');
    header('Content-Type: application/json');

    $json = file_get_contents('php://input');

    echo $json->firstname;
?>

问题出在PHP端：file_get_contents('php://input')获取到的是JSON格式的字符串，不是可直接访问属性的对象或数组，直接用$json->firstname会触发错误。

需要先使用json_decode()将字符串解析为PHP对象或关联数组，再访问字段：

方法1：解析为对象 #

<?php
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Headers: *');
    header('Content-Type: application/json');

    $jsonStr = file_get_contents('php://input');
    // 解析为对象（第二个参数默认false）
    $data = json_decode($jsonStr);
    
    // 检查解析是否成功
    if ($data) {
        echo $data->firstname;
    } else {
        echo json_encode(['error' => 'Invalid JSON data']);
    }
?>

方法2：解析为关联数组 #

如果习惯用数组操作，将json_decode()的第二个参数设为true即可：

<?php
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Headers: *');
    header('Content-Type: application/json');

    $jsonStr = file_get_contents('php://input');
    // 解析为关联数组
    $data = json_decode($jsonStr, true);
    
    if ($data) {
        echo $data['firstname'];
    } else {
        echo json_encode(['error' => 'Invalid JSON data']);
    }
?>

额外优化建议 #

Angular端的HttpHeaders设置可以简化：HttpClient.post默认会发送Content-Type: application/json，且Access-Control-Allow-Origin是服务器返回的响应头，不需要在请求头中设置。简化后的代码：

test() {
    let data = {
      firstname: "John",
      lastname: "Wick"
    }

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

    this.http.post(this.php_url, data, {headers}).subscribe((res) => {
      console.log("Posted successfully")
      console.log(res);
    }, (err) => {
      console.log(err.error);
    });
  }

内容的提问来源于stack exchange，提问作者Shukri Damit