axiosを使ってvue.jsからphpにpostデータを送りたい

Question

前提・実現したいこと

axiosを使ってvue.jsからphpにpostデータを送りたいと思ってます。
下記のコードにあります、
phpの変数$mailの中に、テキストデータとして、メールアドレスが格納できれば問題ないのですが、うまく渡すことができていません。
いくつか調べて、普通に渡してもpostでデータが渡らないことはわかったのですが、下記のソースの場合、どう書けば実際にデータが渡るのかがわかりません。
コードの書き方を教えていただけると幸いです。

vue.js

axios.post(
        "http://localhost:8888/dev/library/php/get_account.php",
        JSON.stringify({
          mail: "[e-mail]",
        })
      )
      .then((response) => {
        console.log(response);
      });

PHP

<?php
require('dbconnect.php');
$mail = $_POST['mail'];

$users = $db->prepare('SELECT * FROM members WHERE mail=?');
$users->execute(array(($mail);
$user = $users->fetch();

$user = json_encode($user);
echo ($user);

?>

Answer 1

vue.js側を下記のように変更したら解決しました。

let params = new URLSearchParams();
    params.append("mail", "[e-mail]");

    axios
      .post("http://localhost:8888/dev/library/php/get_account.php", params)
      .then((response) => {
        console.log(response.data.name);
      });

Comments

[m.ts10806]

質問も回答も編集できます。

Answer 2

vue.js側を下記のように変更したら解決しました。

let params = new URLSearchParams();
    params.append("mail", "[e-mail]");

    axios
      .post("http://localhost:8888/dev/library/php/get_account.php", params)
      .then((response) => {
        console.log(response.data.name);
      });

Answer 3

サンプル見た感じ、JSON.stringify()は必要ないのではないでしょうか。key:valueのオブジェクトそのままで良いように思います。

Comments

[aki0412]

回答ありがとうございます。
「JSON.stringify()」を入れずに、オブジェクトのまま送るとCORS policyでブロックされてしまうようです。

[m.ts10806]

フロント側（つまりVue側）もhttpアクセスされてますか？

[aki0412]

はい。
こちら情報には記載できていませんでしたが、
開発環境はphpはmamp、vue.jsはvuecliと、それぞれ別々でローカルサーバーが立ち上がっております。

[m.ts10806]

質問本文に環境情報として追記願います。
しかしサーバーが違いますか。両者を同一サーバー内では難しいですか？