PHP MEMO

[test1.html]
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>CORS JS/PHP Sample</title>
</head>
<body>
    <h1>CORS Request from JavaScript (HTML) to PHP</h1>
    <button onclick="fetchData()">Get Data from PHP</button>
    <pre id="output">Selecting the button will display the result here.</pre>

async function fetchData() {
            try {
                const response = await fetch(API_URL);

if (!response.ok) {
                    throw new Error(‘Invalid network response’);
                }

const data = await response.json();
	document.getElementById(‘output’).textContent = 
                    ‘[Success] Result:\n’ + JSON.stringify(data, null, 2);

} catch (error) {
                
                console.error(‘Problem occurred during fetch operation:’, error);
	document.getElementById(‘output’).textContent = 
                    ‘An error occurred.’ +
                    ‘\n(Please check the “Access-Control-Allow-Origin” setting on the PHP side).’;
            }
        }
    </script>
</body>
</html>

copy

[test1.php]
// -----------------------------------------------------
// 1. CORSヘッダーの設定 (最も重要)
// -----------------------------------------------------

//アクセスを許可するオリジンを指定します。
//このサンプルでは、全てのオリジンからのアクセスを許可しています。
header("Access-Control-Allow-Origin: *");

//レスポンスのタイプがJSONであることをブラウザとJSに伝えます
header("Content-Type: application/json; charset=UTF-8");


//-----------------------------------------------------
//2. 実際のリクエスト処理
//-----------------------------------------------------

//返すデータを設定します
$data = array(
	"message" => "Hello test1.html",
	"user_id" => 1234567890,
	"source" => "test data"
);

//データをJSON形式に変換して出力します
echo json_encode($data);

copy

[test1.php]
// -----------------------------------------------------
// 1. Setting CORS headers (most important)
// -----------------------------------------------------

// Specifies origins allowed to access.
// This sample allows access from all origins.
header(“Access-Control-Allow-Origin: *”);

// Informs the browser and JS that the response type is JSON
header(“Content-Type: application/json; charset=UTF-8”);


//-------- ---------------------------------------------
//2. Actual Request Handling
//------------------------------------------- ----------

// Set the data to return
$data = array(
    “message” => “Hello test1.html”,
    “user_id” => 1234567890,
    “source” => “test data”
);

// Convert the data to JSON format and output it
echo json_encode($data);

header("Access-Control-Allow-Origin: *");

すべての全てのオリジンからのアクセスを許可します。
※オリジン(Origin)とは、インターネット上のリソースウェブサイトやデータを一意に識別するためのアドレス(URL)の一部を指します。

[実行ステップ]

(1) HTMLファイル(test1.html)がブラウザで表示されます。
(2) JavaScriptが動作し、PHPファイル(test1.php) にデータ取得のajaxリクエスト（GETメソッド）を送信します。
(3) PHPファイルは、許可を示すCORSヘッダーを付けてJSONデータを返します。

※CORS（Cross-Origin Resource Sharing：クロスオリジンリソース共有）は、
JavaScriptなどのクライアントサイドのスクリプトが、自分とは異なるオリジンにあるリソースにアクセスするための仕組みです。
単純リクエストではHEAD/POST/GETのいずれかを使用する必要がありますが、HEADを使用する場合は、特別に宣言は必要ないようです。

$data = array(

このサンプルではhtml側で使用するデータを準備しています。

echo json_encode($data);

json_encodeメソッドに該当データを設定することでphp側からhtml側にデータが送信されます。