JavaScriptのfetchでPHPの実行結果が取得できない

Question

###やりたいこと
jsでphpを実行し結果を取得したい。

###環境
win10
vscode
xampp

###問題
PHPが実行されずに中身の本文だけがそのまま返ってきます。fetchを利用していますがajaxやXMLHttpRequestでも同じ結果でした。いずれもエラーは出ておりません。PHP単体では実行、処理されます。
どなたかご教授願えないでしょうか。

  fetch("http://127.0.0.1:5500/php/test.php")
  .then(res=>{
      return res.text();
  })
  .then(data=> {
    console.log(data);
  })
  .catch(err=> {
    console.log(err);
  })

<?php
  $num = 1 + 1;
  echo "result:".$num
?>

//Responseのconsole出力
Response
body: (...)
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: "OK"
type: "cors"
url: "http://127.0.0.1:5500/php/test.php"
__proto__: Response

Comments

[hoshi-takanori]

127.0.0.1:5500 で動いているのは何ですか？ また、元のページはどんな URL を指定して表示してますか？

[udagawah1015]

ポート番号5500はvscodeでjsをデバッグするためのものです。これがないとCORSエラーが出てしまいます。元のページというのはindex.htmlのことでしょうか？

[hoshi-takanori]

VSCode Live Server ですね。これは PHP を実行することができないため、PHP のソースコードがそのまま返ってきてしまいます。PHP を実行するには PHP に対応した Web サーバーが必要なので、すでに XAMPP を入れてるならそれを使うと良いでしょう。

[udagawah1015]

ありがとうございます！！！まさにご指摘の通りで、xampp/httdocsに格納したところすんなりと動きました！！phpは必ずサーバーに置くように気を付けます！！本当にありがとうございました！！

[udagawah1015]

ベストアンサー選択の依頼をしたいのですが可能でしょうか？

[hoshi-takanori]

ご自分で回答をお書きになってますので、そのまま自己解決にしてくださって構いません。

[udagawah1015]

承知しました！

Answer 1

ポートを指定しているのでCORSにかかっているのでは？
ブラウザに直打ちすれば値が戻ってくるのでしょうか？

Comments

[yambejp]

おなじドメイン内なら、httpから書かずに、絶対pathだけ書いて
接続してみるとか・・・たとえば
fetch("/php/test.php")

[udagawah1015]

ご指摘のとおりやってみましたがダメでした。js/php/htmlなどのすべてのファイルはデスクトップ上のフォルダに格納しており、xampp/htdocsには何もおいておりません。

[udagawah1015]

＞＞同じくphp本文だけが出力され、コードの処理自体は実行されてません。

[udagawah1015]

解決しました！ご回答ありがとうございました！

Answer 2

hoshi-takanori様のご指摘の通り、phpファイルをサーバーに置くことで解決しました！

＞VSCode Live Server ですね。これは PHP を実行することができないため、PHP のソースコードがそのまま返ってきてしまいます。PHP を実行するには PHP に対応した Web サーバーが必要なので、すでに XAMPP を入れてるならそれを使うと良いでしょう。