現在の位置: ホーム> 最新記事一覧> クロスドメインリクエストを実装する2つの方法：JSONPとCORS詳細な説明

クロスドメインリクエストを実装する2つの方法：JSONPとCORS詳細な説明

gitbox 2025-06-15

1。クロスドメインデータ送信の背景

クロスドメインのデータ要求は、最新のフロントエンド開発における一般的な要件です。ブラウザのセキュリティポリシーの制限により、ページは異なるドメイン名、プロトコル、またはポートからデータを直接取得することはできません。また、ドメインクロス通信は解決すべき緊急の問題になりました。この記事では、PHP言語をめぐる2つの主流のクロスドメイン伝送ソリューションの実装方法を紹介します。

2。同じオリジナル戦略を理解します

「同種ポリシー」は、セキュリティを確保するためにブラウザが使用する重要なメカニズムです。ページのプロトコル、ドメイン名、およびポートは、通常のリソースに通常アクセスするために現在のページと一致する必要があります。たとえば、ページアドレスが次の場合：http：//www.example.com/index.html、次の場合：

  • プロトコルはhttpでなければなりません
  • ドメイン名はwww.example.comでなければなりません
  • ポートはデフォルト80である必要があります（ポートが宣言されていない場合）

3.クロスドメインリクエストにはJSONPを使用します

JSONP（パディング付きJSON）は、スクリプトタグに基づくクロスドメインデータ収集方法です。スクリプトタグは同じオリジンポリシーによって制限されていないため、他のドメイン名からデータを要求し、コールバック関数を介して返品値を取得するために使用できます。

 <script type="text/javascript">
    function jsonpCallback(data){
        alert(data);
    }
</script>
<script type="text/javascript" src="http://www.domain2.com/data.php?callback=jsonpCallback"></script>

サーバー側のPHPコードは次のとおりです。

 <?php
$data = array('name' => 'Q.syr', 'age' => 24);
echo $_GET['callback'] . '(' . json_encode($data) . ')';
?>

この方法は、GETリクエストのみをサポートし、使いやすいだけでなく、XSS攻撃のリスクなどのセキュリティリスクもあります。

4。CORSクロスドメインリソース共有ポリシー

CORS（クロスオリジンリソース共有）は、W3Cによって定式化された標準です。これにより、サーバーは応答ヘッダーを設定してリソースにアクセスできるドメイン名を宣言できます。現在、より安全で一般的なクロスドメイン処理方法です。

4.1 PHP実装CORS応答ヘッダー

header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST,GET');
header('Access-Control-Allow-Headers:x-requested-with,content-type');

説明：

  • アクセスコントロール - アロウオリジン：アクセスを許可されたソース*は、すべてのドメインがアクセス可能であることを意味します
  • Access-Control-Allow-Methods ：HTTPメソッドが許可されています
  • Access-Control-Allow-Headers ：許可リクエストヘッダーフィールド

4.2フロントエンドはXMLHTTPREQUESTを使用して、クロスドメイン要求を実装します

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
        var responseText = xmlhttp.responseText;
        console.log(responseText);
    }
}
xmlhttp.open('GET', 'http://www.domain2.com/data.php', true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send();

この方法は複数のHTTPメソッドをサポートし、非常に安全ですが、バックエンドは応答ヘッダーの設定に協力する必要があります。

5。JSONPとCORSの比較

2つの方法には独自の特性があります。

  • JSONP：実装は簡単で、サーバー構成は不要で、GETリクエストのみをサポートします。セキュリティリスクがあります。
  • CORS：標準的な方法は、セキュリティの高い複数のリクエストタイプと認証メカニズムをサポートします。バックエンド応答ヘッダー構成が必要です。

6。概要

この記事では、クロスドメイン通信を実装するためのPHPの2つの主流のソリューションについて説明します - JSONPとCORS。開発者は、プロジェクトの実際のニーズ、ブラウザの互換性、セキュリティ、その他の要因に基づいて、最も適切な実装方法を選択できます。セキュリティと柔軟性を追求する場合は、クロスドメイン処理のCORSメソッドを優先することをお勧めします。

関連内容