javascript XMLHttpRequest()にて、phpファイルを開けない

現在、php及びjavascriptを習得するために本で勉強しています。
しかしながらjavascriptからphpファイルを読み出す処理において、
エラーを吐き、次に進めなくなってしましました。

実際にどのようなエラーになっているか確認しましたところ、
次のように表示されました。
[object ProgressEvent]

実現したいこと

phpファイルにjavascript(XMLHttpRequest())
にてアクセスが行えるようにする。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

hello.php

PHP
1<?php
2echo date("Y年 m月 d日 h時 i分");
3?>
4

script.js

javacript
1function onClickBtn(){
2	var xhr = new XMLHttpRequest();
3	xhr.open('GET', '/hello.php', true);
4	xhr.onload = function(e) {
5		if (this.status == 200) {
6			var result = this.response;
7			var msg = document.querySelector('#msg');
8			msg.textContent = result;
9		}
10	};
11
12	xhr.onerror = function(error){
13		var msg = document.querySelector('#msg');
14			msg.textContent = error;
15	}
16	xhr.send();
17}
18

hello.html

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8">
5	<title>Hello!</title>
6	<style>
7	body { font-size:14pt; font-weight:plain;}
8	h1 { color:white;font-size:24pt;
9		background-color:red; }
10	#canvas {
11		background-color:white;
12		border: 1px solid gray;
13	}
14	</style>
15	<script src="script.js"></script>
16</head>
17<body>
18	<h1 id="title">Hello!</h1>
19	<p id="msg">今、何時かな？</p>
20	<button onclick="onClickBtn();">Check!</button>
21</body>
22</html>

試したこと

このjavascriptが動いているかを、
XMLHttpRequest()があるところ以前に
コードを書き、確認しました。

xhr.openの所、'/hello.php'を
'hello.php'
'http://localhost/hello.php'
に変更してみて実行してみました。
両方ともに変化はありません。

補足情報（FW/ツールのバージョンなど）

使用した仮想サーバーはXAMPPv3.3.0のApacheです。

m.ts10806

2022/09/02 11:51

>エラーを吐きエラーメッセージを確認できてないのでしたら「エラーを吐き」ではないと思います。いずれにしてもオブジェクトが返ってきているのでしたら、テキストとして出力するのではなくconsole.logで展開した方が良いです。

m.ts10806

2022/09/02 11:52

ちなみに http://localhost/hello.php にブラウザから直アクセスしたときに正しく出力はされてますよね？

m.ts10806

2022/09/02 11:53

もう一つちなみに、HTMLからはhttpでアクセスされてるのでしょうか。ブラウザ開発ツールのコンソールも確認してください。

Shitake893

2022/09/02 12:16

m.ts10806さん、ありがとうございます。すいません、語弊がありました。まず、エラーを吐きというよりも、javascriptで実行して、 onloadの処理が行われず、onerrorで記入した命令が実行されてしまったという事です。そして、二つ目の質問、http://localhost/hello.phpに直接アクセスすることはできます。グーグルクロームにて実行しました。 3つ目の質問ですが、HTMLファイルはhttpでアクセスしているのではなく、ファイルをプログラムから開くで、グーグルクロームで開かせています。（なのでアドレスはfile:///C:/xampp/htdocs/hello.html）となっています。

m.ts10806

2022/09/02 12:47

質問は編集できます。

行動規範の内容に同意します

回答3件

みなさん、ありがとうございます。とりあえず、HTMLをダブルクリックで開くのではなく、
localhostの方で起動させたら、読み込むことが出来ました。

投稿2022/09/02 14:09

Shitake893

総合スコア11

m.ts10806

2022/09/02 20:57

その理由を込みで回答したのですが、それで自己解決は、ちょっと。

Shitake893

2022/09/03 06:47

ごめんなさい、操作ミスです・・・

行動規範の内容に同意します

ベストアンサー

（なのでアドレスはfile:///C:/xampp/htdocs/hello.html）となっています。

CORSの問題が起きているのでは。
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS
大抵のブラウザで、開発ツールのコンソールに警告が表示されるはずです。

ひとまずそのリクエスト送信元となっている画面、機能からhttpアクセスしてください。

投稿2022/09/02 12:48

m.ts10806

総合スコア80850

XHRよりfetchで試してみて同様でしょうか？

javascript
1const onClickBtn=()=>{
2  const url='/hellow.php';
3  fetch(url)
4    .then(res=>{
5      if(res.ok) return res.text();
6      throw new Error(res.status);
7    })
8    .then(x=>document.querySelector('#msg').textContent=x)
9    .catch(err=>console.error(err));
10}