jQuery Academy · レッスン

クロスドメインAJAX（CORS/JSONP）

JSONPを使用したクロスドメインAJAXリクエストや、サーバーでCORSヘッダーを設定した安全なデータ交換の方法を理解し、実践します。

「クロスドメインAJAX（CORS/JSONP）」はCoddyKit上の無料jQuery Academyレッスンです。これはレッスン3/3です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはjQuery Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 jQuery Academyコースには全3レッスンが含まれています。

クロスドメインAJAX：課題

Webサイトが別のWebサイトからデータを取得しようとするリクエストは、クロスドメインAJAXリクエストと呼ばれます。これは扱いが難しいことがよくあります。

Webブラウザーには、Webページがそのページの提供元とは異なるドメインへリクエストを送信するのを防ぐセキュリティルールが、デフォルトで設定されています。このルールはデータを保護します。

同一オリジンポリシーを理解する

先ほど説明したセキュリティルールは、Same-Origin Policy（SOP）と呼ばれます。これはブラウザーの基本的なセキュリティ機能です。

SOPでは、あるWebページに含まれるスクリプトが別のWebページのデータにアクセスできるのは、両方のWebページが同じオリジン（ドメイン、プロトコル、ポート）を持つ場合に限られます。

例：mywebsite.comのページから、api.anotherdomain.comのデータを直接取得することはできません。

CORS：最新の解決策

クロスドメインリクエストを安全に許可するために、WebコミュニティはCross-Origin Resource Sharing（CORS）を開発しました。現在では、これが標準的な方法です。

CORSでは、特定のほかのドメインがリソースにアクセスしてもよいことを、サーバーからブラウザーへ明示的に伝えます。

CORS：サーバー側の設定

CORSは主に、データを提供するサーバーで設定します。サーバーはレスポンスに専用のHTTPヘッダーを含め、アクセスを許可するオリジンを示します。

重要なヘッダーはAccess-Control-Allow-Originです。リソースへのアクセスを許可するドメインを指定します。

Access-Control-Allow-Origin: *（すべてのドメインを許可）
Access-Control-Allow-Origin: https://yourdomain.com（特定のドメインのみ許可）

CORS：jQueryでのクライアントリクエスト

クライアント側（jQueryを使用）では、サーバーが正しく設定されていれば、CORSリクエストの送信方法は通常のAJAXリクエストとほとんど変わりません。

ブラウザーとの通信はjQueryが処理します。$.ajax()の呼び出し先をクロスドメインURLにするだけです。

$.ajax({
  url: "https://api.example.com/data", // Server must allow CORS
  method: "GET",
  success: function(data) {
    console.log("CORS success:", data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error("CORS Error:", textStatus, errorThrown);
  }
});

CORS：プリフライトリクエスト（OPTIONS）

特定の「複雑な」CORSリクエストでは、ブラウザーは実際のリクエストを送信する前にプリフライトリクエストを実行します。これは追加のセキュリティ手順です。

プリフライトリクエストでは、OPTIONS HTTPメソッドを使ってサーバーに許可を求めます。サーバーが許可すると、ブラウザーは実際のリクエスト（PUT、DELETE、カスタムヘッダーを含むリクエストなど）を送信します。

JSONP：以前の代替手段

CORSが広く採用される前は、JSONP（JSON with Padding）がクロスドメインリクエストの一般的な回避策でした。特に、古いブラウザーやAPIで利用されていました。

JSONPは、任意のドメインから<script>タグを読み込めるというブラウザーの仕組みを巧みに利用して、Same-Origin Policyを回避します。

JSONP：仕組み

JSONPは次のように動作します。

<script>タグを動的に作成し、srcにクロスドメインURLを設定します。
JSONPリクエストを想定しているサーバーが、JSONデータを関数呼び出し（「パディング」）で包みます。
ブラウザーがこのスクリプトを実行し、データを引数として、ページでグローバルに定義された関数を呼び出します。

JSONP：jQueryでの実装

jQueryを使うと、JSONPを簡単に実装できます。$.ajax()の呼び出しでdataType: "jsonp"を指定するだけです。

jQueryが<script>タグの動的な作成、一意なコールバック関数名の生成、レスポンス到着時の実行を自動的に処理します。

$.ajax({
  url: "https://api.example.com/jsonp-data?callback=?", // Server must support JSONP
  dataType: "jsonp",
  success: function(data) {
    console.log("JSONP success:", data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error("JSONP Error:", textStatus, errorThrown);
  }
});

CORSとJSONP：主な違い

どちらもクロスドメインの問題に対処しますが、CORSとJSONPにはそれぞれ異なる特徴があります。

CORS：最新の標準方式で、HTTPヘッダーを使用し、安全で、すべてのHTTPメソッドに対応します。サーバー側の設定が必要です。
JSONP：以前の回避策で、<script>タグを使用します。安全性が低く、GETリクエストのみ対応します。クライアント側の手法で、サーバーによるレスポンスのラップが必要です。

簡単な確認：クロスドメイン

クロスドメインAJAXリクエストについて、次の記述のうち正しいものはどれですか？

復習：クロスドメインをマスターする

クロスドメインAJAXリクエストでSame-Origin Policyを克服する方法を学びました。

CORSは、サーバー側のHTTPヘッダーによる許可に基づく、最新で安全な標準方式です。
JSONPは、動的な<script>タグを使う、GETリクエスト向けの古く、安全性の低い回避策です。

可能な限り、より安全で柔軟なCORSを常に優先してください。JSONPは主にレガシーシステムや特定の状況で使用します。

よくある質問

「クロスドメインAJAX（CORS/JSONP）」レッスンは無料ですか？

はい。「クロスドメインAJAX（CORS/JSONP）」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、jQuery Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 jQuery Academyコースには全3レッスンが含まれています。

「クロスドメインAJAX（CORS/JSONP）」で何を学びますか？

JSONPを使用したクロスドメインAJAXリクエストや、サーバーでCORSヘッダーを設定した安全なデータ交換の方法を理解し、実践します。ブラウザで直接実行するハンズオンコードでjQuery Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

jQuery Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのjQuery Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/3です。

「クロスドメインAJAX（CORS/JSONP）」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このjQuery Academyレッスンでコードを書いて実行できますか？

はい。すべてのjQuery Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← jQuery Academyに戻る