【PHP＆JS】$_POSTの制限＆ajaxとfetchのデータ形式

背景
PHPファイルで$_POST['']を使い、フロント側からのデータを取ろうとした。fetchでも使てみようかと思って使ってみたら、データはうまく取れなかった。調べたら、$_POSTは決めたデータしか取れないということが分かった。

結論から言うと、$_POSTはapplication/x-www-form-urlencodedやmultipart/form-dataで送られたデータしか取得できない。
jQueryはデフォルトでapplication/x-www-form-urlencoded 形式のデータを送信している。$_POSTで受け取ることができる。

ajax.javascript

$.ajax({
    url: "https://example.com/page/function/function.php",
    type: "POST",
    data: { id: id, password: password },
    dataType: "json",
    success: function(response) {
        console.log(response);
    }
});

一方、下記はContent-Type: application/json を指定しているため、データはJSON 形式で送信され、$_POSTで受け取れない。

fetch修正前.javascript

fetch('https://example.com/page/function/function.php', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ id: id, password: password })
})

解決方法①　JSファイルを直す。
$_POSTで受け取れる形にする。

fetch修正後.javascript

fetch('https://example.com/page/function/function.php', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: new URLSearchParams({
        id: id,
        password: password
    })
})

解決方法②　PHPファイルを直す。
file_get_contents("php://input")とjson_decodeを使いJSONを受け取る。

fetch修正後.php

<?php
$data = json_decode(file_get_contents("php://input"), true);
$id = $data['id'] ?? null;
$password = $data['password'] ?? null;
?>