87 views
1. CORSに関する情報収集
CORS(Cross-Origin Resource Sharing)については、以下のサイトを参照されたい。
https://aws.amazon.com/jp/what-is/cross-origin-resource-sharing/
CORS（コーズ）を簡単に説明すると？
・CORS情報を提供するのは？ → サーバー側
・CORS情報を参照するのは？ → クライアント側（＝Webブラウザ）
・CORS情報を参照するタイミングは？ → JavaScript内のコードで HTTPリクエストを発行し、HTTPレスポンスを受信した時にそのヘッダ内の CORS情報 Access-Control-Allow-Origin を見る。
・CORS情報を参照して何をする？ → JavaScript内でレスポンスデータの取得可否を判断する。否ならば受信データを捨てて、JavaScript上で受信失敗処理ルートを実行する。つまり、受信データを取得出来ていても、捨ててしまう。
∴ CORSは、Webブラウザ側で受信データの取得可否を判断するために使用する。
2. 自作のサイトで Web APIを公開する場合に必要なこと
(1) 自作のサイトで Web APIを一般公開する場合
Web APIリクエストに対する応答を送信時に、HTTPの Access-Control-Allow-Origin ヘッダでワイルドカード * を指定する必要がある。
サーバー側の Web API処理プログラムが PHP言語で書かれている場合、以下のように書く。
// CORSを許可するヘッダーを設定
header("Access-Control-Allow-Origin: *");
(2) 自作のサイトで Web APIを自サイトのページでのみ使用可能に制限する場合
自サイトが https://www.example.com の場合、サーバー側の Web API処理プログラムで以下のように書く。
// CORSを許可するヘッダーを設定
header("Access-Control-Allow-Origin: https://www.example.com");
3. 実際にプログラムを作って確認してみた。
1) プログラムの仕様
第1項、第2項の二つの値を渡すと、足し算の結果を返してくれる Web APIを作ってみた。
ミニマム系を作って動作確認すると、物事の本質が際立って見えてくる。
画面仕様はたったのこれだけだ。
2) プログラムソースコード
(1) index.html
<!DOCTYPE html> <html> <head> <title>Blog No.145</title> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body> <input type="text" name="t1" /> ＋ <input type="text" name="t2" /> ＝ <input type="text" name="s" disabled> <input type="button" id="BTN" value="計算実行"> </body> </html>
(2) style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
padding: 0.5rem;
}
(3) script.js
URLのパスは、実際に Web APIを設置したサーバーを指定すること。
ここでは適当な URLを記している。
document.addEventListener("DOMContentLoaded", function() {
const inp_t1 = document.querySelector('input[name="t1"]');
const inp_t2 = document.querySelector('input[name="t2"]');
const inp_s = document.querySelector('input[name="s"]');
const btn = document.getElementById('BTN');
btn.addEventListener('click', function() {
let url = `https://www.example.com/sample/webapi.php?t1=${inp_t1.value}&t2=${inp_t2.value}`;
fetch(url)
.then(resp => resp.json())
.then(data => {
inp_s.value = data.s;
})
.catch(error => {
console.error('Error fetching data:', error);
});
});
});
(4) webapi.php
このファイルだけ、上記の(1),(2),(3)とは異なるドメインのWeb上に設置する。※CORSに関する動作確認のため
前述のように、2行目の有無が今回の実験の重要ポイントだ。
<?php
header('Access-Control-Allow-Origin: *');
$resp['s'] = $_GET['t1'] + $_GET['t2'];
echo json_encode($resp, JSON_UNESCAPED_UNICODE);
?>
3) 動作確認結果
(1) Web APIからのレスポンスに CORS情報を含めない場合
すなわち、上記の 2)-(4) webapi.php の 2行目、header()をコメントアウトして実行する。
<?php
//header('Access-Control-Allow-Origin: *');
$resp['s'] = $_GET['t1'] + $_GET['t2'];
echo json_encode($resp, JSON_UNESCAPED_UNICODE);
?>
この場合、Webブラウザのコンソールに、以下のようにCORSによるエラーが表示された。
つまり、受信データが Webブラウザにより捨てられ、JavaScriptコードは受信エラーのルートに分岐する。
(2) Web APIからのレスポンスに CORS情報を含める場合
すなわち、上記の 2)-(4) webapi.php の 2行目、header()を有効にして実行する。
<?php
header('Access-Control-Allow-Origin: *');
$resp['s'] = $_GET['t1'] + $_GET['t2'];
echo json_encode($resp, JSON_UNESCAPED_UNICODE);
?>
この場合、Webブラウザのコンソールにエラーは表示されず、JavaScriptプログラムが最後まで実行される。
下記のように、Webページ上に足し算の結果が表示された。
