HTML5 CORSのイベントハンドラー実装例をわかりやすく解説

CORS（オリジン間リソース共有）とは

クロスオリジンリソース共有（CORS：Cross-Origin Resource Sharing）とは、Webブラウザ上で、別のドメインから制限付きリソースへのアクセスを許可するための仕組みです。通常、ブラウザには「同一生成元ポリシー」というセキュリティ制約があり、異なるオリジン間でのリソース取得はブロックされますが、CORSを利用することで、サーバー側が許可した範囲内で安全にデータのやり取りが可能になります。

カメラアクセス許可の具体例

たとえば、HTML5デモセクションにあるHTML5動画プレーヤーをクリックすると、カメラへのアクセス許可を求められます。ユーザーが許可を選択した場合にのみカメラが起動し、許可しなければWebアプリケーションのためにカメラが開かれることはありません。このように、CORSではリソースへのアクセスにあたり、ユーザーやサーバーによる許可が求められるケースがあります。

CORSにおけるイベントハンドラーの例

以下は、XMLHttpRequestを使用したCORS通信におけるイベントハンドラーの実装例です。xhr.onloadで正常時のレスポンスを処理し、xhr.onerrorでエラー発生時の処理を行います。

xhr.onload = function() {
    var responseText = xhr.responseText;
    // レスポンスを処理する
    console.log(responseText);
};
xhr.onerror = function() {
    console.log('エラーが発生しました！');
};

xhr.onloadはリクエストが正常に完了した際に呼び出され、responseTextプロパティからサーバーからの応答データを取得できます。一方、xhr.onerrorはネットワークエラーやCORSポリシー違反など、リクエストが失敗した場合に呼び出されます。両方のハンドラーを実装しておくことで、堅牢な非同期通信処理を実現できます。