POST送信時に$_POSTが空になる

Question

PHPの学習中で、ログインを行うプログラムを作っていて、Ajaxでログインの処理を行おうと思っています。

発生している問題

JavaScriptからPHPにPOST送信すると、$_POSTが空になってしまいます。
file_get_contents('php://input')でメッセージボディーを確認すると、一応データは送信されているようです。
#ソースコード
データは Javascript(Fetch API) => POST => PHP($_POST) という流れで送信されます。

<form id="inputbox" name="inputbox">
	<input type="text" name="name" placeholder="ユーザー名">
	<input type="password" name="pass" placeholder="パスワード">
	<button type="button" onclick="signin();">サインイン</button>
	<!-- このボタンで送信 -->
</form>

function signin(){
    fetch(`./account.php`,{
	    method:"POST",
	    body:`type=signup&name=${inputbox.name.value}&pass=${inputbox.pass.value}`,
	    headers:{
		    "Content-Type": "application/www-form-urlencoded"
	    }
	}).then(response => {
  	  //処理が続く
	}).catch(reject => {
	});
}

echo file_get_contents('php://input');
if(!isset($_POST['type'])){ //ここで$_POSTが空になっている
    exit;
}
$type = $_POST['type'];

環境

XAMPP for Windows 8.0.8
PHP 4.0.8
Windows 10 Home 20H2
Microsoft Edge 92.0.902.62

Answer 1

fetchするならformdataが原則です

function signin(){
  const url="./account.php";
  const body=new FormData(document.querySelector('#inputbox'));
  body.append('type','signup');
  fetch(url,{
  method:"POST",
  body
  }).then(response =>response.text())
    .then(console.log);
}

Answer 2

fetch時のヘッダ指定タイプミスだと思われます。

-             "Content-Type": "application/www-form-urlencoded"
+             "Content-Type": "application/x-www-form-urlencoded"

上記指定で$_POSTにフォームのデータが入ることは確認済みです。

参考：
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Content-Type

MIME タイプの解釈値 (引数を除いたもの) が application/x-www-form-urlencoded, multipart/form-data, text/plain の何れかである必要があります。