HTML - Web CORS: A Beginner's Guide

こんにちは、Web開発者の卵さんたち！今日は、CORSの世界に興味深い旅に出ます。前に聞いたことがない也不用担心 – このチュートリアルが終われば、CORSの専門家になっているでしょう！お気に入りの飲み物を手に取り、リラックスして、一緒に潜りましょう！

HTML - Web CORS

CORSとは？

CORSはCross-Origin Resource Sharingの略です。聞こえは難しいですが、楽しいたとえ話で説明します。

高档レストラン（あなたのウェブブラウザ）にいるとします。通り向かいの別のレストラン（別のウェブサイト）から料理を注文したいとします。通常、高档レストランはあなたに自分の料理を食べさせたいので、これは許可しません。しかし、CORSがあると、高档レストランは「どういたしまして、通り向かいのレストランから注文してどうぞ！」と言います。これは、ウェブブラウザが他のウェブサイトからリソースを安全に要求することを許可する方法です。

CORSが必要な理由は？

ウェブの初期時代には、ブラウザには厳しいセキュリティポリシーであるSame-Origin Policyがありました。このポリシーは、ウェブサイトが他のドメインに要求を送信することを防ぎました。これはセキュリティには良いですが、機能性には悪いものでした。

ウェブが進化するに連れて、開発者は安全にクロスオリジン要求を行う方法を必要としました。それがCORSで、サーバーがSame-Origin Policyを緩和し、特定のクロスオリジン要求を許可する安全な方法を提供しました。

CORSはどのように機能する？

CORSはHTTPヘッダーのシリーズを通じて機能します。ウェブページが異なるドメインに要求を送信すると、ブラウザは要求に特別なヘッダー「Origin」を追加します。サーバーはそれに応じて、ブラウザに要求が許可されているかどうかを伝えるヘッダーで応答します。

簡単な例を見てみましょう：

<!DOCTYPE html>
<html>
<head>
<title>CORS Example</title>
</head>
<body>
<h1>CORS in Action</h1>
<button onclick="makeRequest()">Make Request</button>

<script>
function makeRequest() {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
}
</script>
</body>
</html>

この例では、ボタンをクリックすると、https://api.example.com/dataからデータを取得しようとします。api.example.comのサーバーがCORSを適切に設定している場合、応答にヘッダーが含まれており、あなたのウェブページがデータにアクセスできるようになります。

CORS要求を作成する

では、CORS要求をどのように作成するか詳しく見てみましょう。Fetch APIを使用します。これはJavaScriptでネットワーク要求を行うための現代的で強力な方法です。

fetch('https://api.example.com/data', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

このコードは、https://api.example.com/dataにGET要求を送信します。サーバーの応答が要求の成功与否を決定します。

サーバーがCORSを適切に設定している場合、コンソールにデータが表示されます。設定されていない場合、CORSエラーが発生します。エラーの例は以下の通りです：

Access to fetch at 'https://api.example.com/data' from origin 'http://yourwebsite.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

このエラーを見た場合もパニックに陥らないでください！ただサーバーがあなたのウェブサイトからの要求を許可していないだけです。

CORSでのイベントハンドラ

CORSを扱う際には、成功した応答とエラーの両方を処理することが重要です。前の例を修正して、イベントハンドラを追加してみましょう：

<!DOCTYPE html>
<html>
<head>
<title>CORS with Event Handlers</title>
</head>
<body>
<h1>CORS with Event Handlers</h1>
<button onclick="makeRequest()">Make Request</button>
<div id="result"></div>

<script>
function makeRequest() {
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
document.getElementById('result').textContent = JSON.stringify(data);
})
.catch(error => {
console.error('Error:', error);
document.getElementById('result').textContent = 'An error occurred: ' + error.message;
});
}
</script>
</body>
</html>

この例では、成功した応答とエラーの両方に対するイベントハンドラを追加しています。要求が成功すると、データをページに表示します。エラーが発生すると、エラーメッセージを表示します。

CORSメソッド

CORSはさまざまなHTTPメソッドをサポートしています。以下に最も一般的なメソッドの表を示します：

メソッド	説明
GET	サーバーからデータを取得
POST	サーバーに新しいリソースを作成するためのデータを送信
PUT	サーバー上の既存リソースを更新するためのデータを送信
DELETE	サーバー上のリソースを削除する要求
HEAD	GETと似ているが、ヘッダーのみを取得
OPTIONS	対象リソースの通信オプションを説明

サーバーは、これらのメソッドをCORS要求に対して許可するように設定する必要があります。

結論

おめでとうございます！CORSの世界への初めての一歩を踏み出しました。CORSとは何か、なぜ必要か、基本的なCORS要求をどのように行うかをカバーしました。CORSは、ウェブをより相互接続させながらセキュリティを維持することに関連しています。

ウェブ開発の旅を続ける中で、さまざまなシナリオでCORSに遭遇するでしょう。CORSエラーを恐れずに – それはウェブの仕組みをさらに学ぶ機会です！

練習を続け、好奇心を持ち、ハッピーコーディングを！

Credits: Image by storyset