ローカルサーバーにfetchでPOSTしたい

Question

前提・実現したいこと

fitbit studio上で、fitbitというスマートウォッチアプリを作ろうとしています。
fitbitと同期したAndroid端末があり、そのAndroid端末にデータを保存するには
fetch()で、Android上のローカルサーバーにPOSTしなくてはいけないようです。

KSWEBというAndroidアプリを購入し、Android端末にローカルサーバーを立てました。
上で、POSTされたJSONデータを表示したいです。

発生している問題・エラーメッセージ

fetchでのPOSTは、response.ok=true,response.status200となり、成功しているようなのですが、
PHP上ではNULL表示、JSON.stringify(response)は{}となってしまいます。何が問題なのでしょうか？

該当のソースコード

 let data={"name":"Taro","age":24};
  console.log(JSON.stringify(data));

 fetch("http://127.0.0.1:8080/getJSON2.php",{
    method: "POST",
    body:JSON.stringify(data)})
   .then(response => { 
    console.log(response.ok)//true
    console.log(response.status)//200
    console.log("response "+JSON.stringify(response));//response{}  
  })
    .catch(e => {
    console.log("Upload failed"+JSON.stringify(e)+" "+url);
  });  

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
// POSTされたJSON文字列を取り出し
$json = file_get_contents("php://input");
// JSON文字列を連想配列に変換
$contents = json_decode($json, true);
// デバッグ用にダンプ
var_dump($contents);
?>	

Comments

[FKM]

fetchAPIでのデータ取得の方法、それで合ってますかね？

[rtakeda]

はい。そうです。よろしくお願いします。

Answer 1

fetchにおけるpostのbodyはformdataが基本です
corsで引っかかっていなければ以下のようにしてください

let data={"name":"Taro","age":24};
const method="post";
const body=Object.entries(data).reduce((x,y)=>(x.append(y[0],y[1]),x),new FormData);
fetch(url,{method,body}).then(res=>res.text()).then(console.log);

Comments

[rtakeda]

ありがとうございます。やってみました。
やはりconsoleにはstring(0) "" NULLが表示され、phpでも同様でした。。。

CORSに引っかかっているというのはどういうことでしょうか。
phpにheader("Access-Control-Allow-Origin: *");と記載するのでは不十分なのでしょうか。
初学者で色々と聞いて申し訳ありませんが、教えていただけると幸いです。
よろしくお願い致します。

[yambejp]

api側のpost処理がおかしいですね
あまりpostデータをそのままjsonにするのは微妙ですけどね

//api.php
<?PHP
print json_encode($_POST);

[rtakeda]

無事、javascriptのconsoleで表示できました。
printで出力しないといけなかったということでしょうか。
理解は追いつきませんが、とりあえず先に進めそうです。

ありがとうございました。