fetch APIを使ってPHPとデータのやりとりをしたいのですが

WEBサーバー構築、PHP、Ajaxの勉強のため、
AWS EC2上にリアルタイムチャットを作成しようとしています。

素のJavaScriptでAjaxを使う場合はfetch APIを使うときいたので、
fetch APIとPHPでやりとりをするテストコードを書いてみているのですが、うまく動きません。

うまくいかない理由や、何についての理解が不足しているかなど教えていただけないでしょうか…。

コード

JavaScript
1let apiTest = ()=>{
2    fetch( 'test.php', {
3        method: 'POST',
4        headers: {
5              "Content-type" : "application/json;charset=UTF-8",
6        },
7        body: {
8            'hoge':'ほげ'
9        }
10    })
11    .then( res => { return res.json(); } )
12    .then( jsonRes => { console.log( jsonRes ); } )
13    .catch( err => { console.error( err ); } )
14};

PHP
1<?php
2header('Content-type: application/json');
3echo json_encode([
4    $_POST
5]);

結果

JavaScript
1apiTest();
2//[Array(0)]

やりたいこと

POSTで送られたリクエストボディをそのままレスポンスボディとして返却したいです。
（POSTで送信された値を使うプログラムを書けるようになるため、
まずはPOSTで送信された値がどういうものなのか、どういう風に使うことができるのかをテストしようとしています。）

備考

ソースは全てEC2の/var/www/htmlに置いてあります。
今のやり方ではPOSTの値が空の配列になっているようです。
レスポンスデータを$_POSTから文字列に変更してみると、JavaScriptのコンソールで正しく表示されます。
JavaScriptから送ってるデータは連想配列、つまりオブジェクト型なので、
配列型だと解釈されているならPHPの方になにか原因がある気がするのですが、そこから先がわかりません。

試したこと

コメントいただいた内容を試してみます。（随時追記）

GET方式にしてみる

JavaScript
1let apiTest = ()=>{
2    fetch( 'test.php?hoge="hoge"', {
3        method: 'GET',
4        headers: {
5            "Content-type" : "application/json;charset=UTF-8",
6        },
7    })
8    .then( res => { return res.json(); } )
9    .then( jsonRes => { console.log( jsonRes ); } )
10    .catch( err => { console.error( err ); } )
11};

結果:[Array(0)]

$_POST ではなく php://input で取得してみる

PHP
1<?php
2header('Content-type: application/json');
3#postdata = file_get_contents("php://input");
4echo json_encode([
5    $postdata
6]);

結果:["[object Object]"]　????!?

m.ts10806

2019/10/29 08:41

GETではどうでしょう？

H40831

2019/10/29 09:33 編集

やってみたところ、結果は同じようです… やったこと、本文に追記しました。

行動規範の内容に同意します

回答2件

ベストアンサー

formData使うと楽です

javascript
1const apiTest = ()=>{
2  const body=new FormData();
3  body.append("hoge",'ほげ');
4  const method="post";
5  const filename="test.php";
6  fetch(filename,{body,method}).then(res=>res.json()).then(console.log);
7};
8apiTest();