[php] POSTの値が受け取れない

Question

いつも大変お世話になっております。

表題についてお伺いさせてください。

現在 axios を利用してフォームデータをサーバーに送る部分を作っているのですが、
なぜかサーバー側でPOST値を受け取ることが出来ません。

axiosを使わず極めてシンプルですが、以下の環境を用意したとします。

index.html

<form action="https://hoge.como/recieve.php" method="post">

  <input type="text" name="name">
  <button type="submit">送信</button>

</form>

#recieve.php

<?php

echo $_POST['name'];

上記の例で、ブラウザから index.html にアクセスをし、
フォーム上の送信ボタンを押下後、画面遷移で recieve.php が表示された場合はに $_POST['name'] が表示されます。

しかし、

const url = "https://hoge.como/recieve.php"
const res = await axios.post(url, data); 

のようにaxiosを利用すると、
recieve.php 側の $_POST['name'];には何も入っていません。

また、Postmanを利用して、recieve.phpに対してPOST送信をしてみても何も表示されません。
厳密にはNotice:Undefined index: nameとエラー表示は出ているのですが、
やはり値が渡っていないという意味では同じです。

これまでに何度も axios を利用したフォームなどは作成してきたのですが、
何を見落としているのかがわかりません。

どなたかご教授いただけますと幸いです。

それではどうぞ宜しくお願い致します。

Comments

[FKM]

axiosはAjaxによる非同期通信をローカルサイドで行うためのライブラリです。なのでサーバサイドのPHPからは、普通取得できません。単純にフォームデータを転送したいだけならば、axiosは不要では？

[FKM]

あと、素のjsでaxiosを使用する場合はcsrf対策が必須になっているかもしれません。

[matsuo_basho]

ご回答の方ありがとうございます！
すみません、以下の部分はphpではなく、JavaScriptでした、、！

誤
php
const url = "https://hoge.como/recieve.php"
const res = await axios.post(url, data);

↓

正
Javascript
const url = "https://hoge.como/recieve.php"
const res = await axios.post(url, data);

[matsuo_basho]

ちなみにCORS対策は以下のように行なっております。

<?php

header( 'Access-Control-Allow-Origin: *' );
header( 'Access-Control-Allow-Headers: Content-Type' );
header( 'Access-Control-Allow-Methods: POST' );
header( 'Content-type: application/json; charset=UTF-8' );

echo $_POST['name'];

[matsuo_basho]

ただ、PostManから送信した値も$_POST['name']で受け取ることが出来ないんですよね、、。

[FKM]

axiosで取得したデータはローカルサーバのみ有効なので、yambejp氏の指摘するように値をhiddenなどでhtmlに代入しておかないと、postでPHPサイドに送ることはできません。

[matsuo_basho]

そうだったのですね、、！
いままで上手くこの状況をくぐり抜けてきてしまったいたようですね。。

とりあえず以下のように フォームデータを URLSearchParamsに渡すことで
サーバーで受け取ることが出来ました！

let params = new URLSearchParams();
params.append('name', data['name']);

色々とありがとうございます！

Answer 1

jsでnameの値を参照していませんよね？
CORSとか引っかからないならfetchだとこんな感じで。

<input type="text" name="name" value="123">
<script>
const body=new FormData();
body.append('name',document.querySelector('[name=name]').value);
fetch("recieve.php",{method:"post",body}).then(res=>res.text()).then(console.log);
</script>

Comments

[matsuo_basho]

とりあえず以下のように フォームデータを URLSearchParamsに渡すことで
サーバーで受け取ることが出来ました！

let params = new URLSearchParams();
params.append('name', data['name']);

ご丁寧にご回答いただきありがとうございます！