PHP で Ajax クロスドメインを実装する 3 つの方法を要約する

PHPz
リリース: 2023-04-11 15:10:01
オリジナル
922 人が閲覧しました

フロントエンドとバックエンドの分離の普及により、Web 開発ではフロントエンドがバックエンド インターフェイスを呼び出し、Ajax テクノロジを通じてデータを取得することが一般的な操作になりました。

ただし、ブラウザの同一オリジン ポリシーにより、異なるソース (異なるプロトコル、ドメイン名、またはポート) からの Web ページは相互に独自の DOM および Cookie にアクセスできません。そのため、クロスドメイン アクセスが非常に一般的な要件になります。 。この問題を解決する方法はたくさんあります。

この記事では、PHP で Ajax クロスドメインを実装する 3 つの方法を紹介します。

1. JSONP

JSONP (パディング付き JSON) は、フロントエンドがクロスドメイン リクエストを開始する場合に非常に人気のあるソリューションです。これは実際には、<script> タグにはクロスドメイン アクセスを実現するためのクロスドメイン制限がないという事実を利用して、ブラウザを「騙す」方法です。その原理は、サーバー側でリクエストに応答するためのJavaScriptコードスニペットを動的に生成することであり、このコードスニペットは特定の名前(コールバック関数名)を持つJavaScript関数を呼び出し、サーバー側で処理されたデータをパラメータとして渡します。この機能により、クロスドメイン アクセスの効果が得られます。

JSONP の使用法は次のとおりです:

  1. クライアント コード:
function handleJsonp(data) {
  console.log(data);
}
const script = document.createElement('script');
script.src = 'http://example.com/api?callback=handleJsonp';
document.head.appendChild(script);
ログイン後にコピー
  1. サーバー コード:
<?php
$data = array(&#39;foo&#39; => 'bar');
$callback = $_GET['callback'];
echo sprintf('%s(%s);', $callback, json_encode($data));
?>
ログイン後にコピー

このコードでは、サーバーからの戻り結果は、コールバック関数呼び出しを含む JavaScript コード スニペットです。クライアントがデータを取得すると、自動的にコールバック関数が実行され、サーバーから返されたデータがパラメータとして使用されます。コールバック関数。

JSONP の利点は、優れた互換性です。互換性は、ブラウザが <script> タグをサポートする範囲によってのみ制限されます。ただし、欠点は、セキュリティ上の問題があることです。コールバック関数はクライアント内にあるため、この関数が期待するロジックを実行するかどうかは保証できません。悪意のあるコールバック関数が悪意のあるコードを渡すと、XSS による攻撃を受ける危険性があります。

2. プロキシ モード

プロキシ モードは、もう 1 つの一般的なクロスドメイン ソリューションです。その基本的な考え方は、指定された URL にアクセスするためにサーバー上にプロキシを設定し、プロキシ サーバーから取得したデータをクライアントに返すことです。このようにして、クライアントは同じオリジンからプロキシ サーバーに直接アクセスでき、プロキシ サーバーはクロスドメイン ターゲット サーバーにアクセスして、ターゲット サーバーから返されたデータを転送します。

プロキシ モードは次のように使用されます:

  1. クライアント コード:
fetch('http://example.com/proxy_api')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));
ログイン後にコピー
  1. サーバー コード:
<?php
$url = &#39;http://example.com/api&#39;;
$data = json_decode(file_get_contents($url), true);
echo json_encode($data);
?>
ログイン後にコピー

このコードでは、クライアントのリクエストがプロキシ サーバーに送信され、プロキシ サーバーはターゲット サーバーから返されたデータをクライアントに返すことで、クライアントのクロスドメイン サービスへのアクセスを実現します。

プロキシ モードの利点は、セキュリティが優れていることです。クライアントは同じソースからのみプロキシ サーバーにアクセスし、プロキシ サーバーはクロスドメイン ターゲット サーバーにアクセスするため、次のようなセキュリティが効果的に回避されます。クロスドメイン アクセス: リスクはありますが、追加のサーバー側コードを開発する必要があり、追加の作業と開発コストが追加されるという欠点があります。

3. CORS

CORS は、現在最も人気のあるクロスドメイン アクセス ソリューションです。サーバー側でレスポンスヘッダーを設定し、クロスドメインアクセスを許可するかどうかをクライアントに伝えることで、クロスドメインアクセスのセキュリティ制御を実現します。

CORS は次のように使用されます:

  1. クライアント コード:
fetch('http://example.com/api', {
  mode: 'cors'
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));
ログイン後にコピー
  1. サーバー コード:
<?php
header(&#39;Access-Control-Allow-Origin: *&#39;);
$data = array(&#39;foo&#39; => 'bar');
echo json_encode($data);
?>
ログイン後にコピー

このコードでは、サーバーは Access-Control-Allow-Origin:* 応答ヘッダーを設定し、すべてのソースがインターフェイスへのアクセスを許可されていることを示します。クライアントはリクエストに mode を設定します: 'cors ' パラメータは、リクエストがドメインを越えてアクセスされることをブラウザに通知します。

CORS の利点は、ネイティブにサポートされ、追加の開発作業が必要ないことですが、欠点は、IE8/9 をサポートしておらず、サーバー側でサポートする必要があることです。サブドメイン名のクロスドメイン アクセス。

上記は、PHP で Ajax を実装するための 3 つのクロスドメイン方法です。実際のプロジェクトでは、特定の状況に応じて最適なクロスドメイン ソリューションを選択する必要があります。

以上がPHP で Ajax クロスドメインを実装する 3 つの方法を要約するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート