Ajax でクロスドメインの問題を解決するにはいくつかの方法があります

Ajax がクロスドメインの問題を解決するには、次の 3 つの方法があります。 1. プロキシを使用して、バックグラウンド経由で他のドメイン名のコンテンツを取得し、取得したコンテンツをフロントエンドに返します。同じドメイン名; 2. JSONP を使用して、メソッドは get リクエストのみをサポートし、クライアントの呼び出しとさらなる処理のためにリモート サーバー上の js ファイルにデータをロードします; 3. 「LHttpRequest レベル 2」を使用し、構文は「header('アクセス制御許可オリジン:* ')"。

#この記事の動作環境: Windows10 システム、javascript1.8.5&&html5 バージョン、Dell G3 コンピューター。

ajax がクロスドメインの問題を解決するには 3 つの方法があります。

ドメイン: ドメインは、WIN2K ネットワーク システムのセキュリティ境界です。コンピュータ ネットワークの最も基本的な単位は「ドメイン」であることはわかっています。これは WIN2K に特有のものではありませんが、Active Directory は 1 つ以上のドメインを通じて実行できます。独立したコンピュータでは、ドメインはコンピュータ自体を指します。ドメインは複数の物理的な場所に分散できます。同時に、物理的な場所は異なるネットワーク セグメントの異なるドメインに分割できます。各ドメインには独自のセキュリティ ポリシーがあり、他のドメインとの信頼関係との関係。複数のドメインが信頼関係を通じて接続されている場合、Active Directory を複数の信頼するドメインで共有できます。

職場で他のドメイン名でリクエストをリクエストするには AJAX を使用する必要があるため、アクセスは拒否されます。これは、セキュリティ上の考慮事項に基づいて、AJAX はローカル リソースにのみアクセスでき、クロスドメイン リソースにはアクセスできないためです。

たとえば、Web サイトのドメイン名が aaa.com で、AJAX 経由で bbb.com ドメイン名のコンテンツをリクエストすると、ブラウザはそれを安全でないとみなしてアクセスを拒否します。

クロスドメインの問題が発生する状況はいくつかあります。

プロキシ、JSONP、および XHR2 (XMLHttpRequest レベル 2) の合計 3 つの解決策が要約されています。

最初の方法はプロキシ: この方法は、バックグラウンド (ASP、PHP、JAVA、ASP.NET) 経由で他のドメイン名のコンテンツを取得し、取得したコンテンツはフロントエンドに戻ります。同じドメイン名の下にあるため、クロスドメインの問題は発生しません。

実装コード: AJAX リクエストを作成します (ページ アドレス: http://localhost/ajax/proxy.html)

var request = null;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
request = new ActiveXObject("Microsoft.XMLHttp");
}
request.onreadystatechange = function(){
console.log(this.readyState);
if(this.readyState===4 && this.status===200){
var resultObj = eval("("+this.responseText+")"); //将返回的文本数据转换JSON对象
document.getElementById("box").innerHTML = resultObj.name+":"+resultObj.sex; //将返回的内容显示在页面中
}
}
request.open("POST","proxy.php",true);
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.send("name=吕铭印&sex=男");

AJAX リクエストを作成します。

proxy.php コード

header("Content-type:text/html;charset=utf-8");
$url = "http://localhost:63342/ajax/proxy.js";
$contents = file_get_contents($url);
echo $contents;

php コードを使用して、localhost:63342 にある proxy.js ファイルを取得します。

proxy.js コード

{
name : "吕铭印",
sex : "男"
}

proxy.html 実行結果

この時点では、プロキシは、異なるドメイン間のファイルにアクセスするために使用されます。

まず、proxy.html で AJAX を使用して、バックグラウンドで proxy.php ファイルにアクセスします。次に、proxy.php がリクエストを受信した後、localhost:63342 にある proxy.js ファイルにアクセスします。 proxy.js、クロスドメイン機能を実装するフロントエンド ページにコンテンツを返します。

複数のクロスドメイン ファイルにアクセスしたい場合は、バックグラウンドの proxy.php ファイルに、アクセスするファイルのアドレスをパラメーターの形式で指定できます。

2 番目のメソッド JSONP (GET リクエストのみをサポート): その後、Js ファイルを呼び出すときにクロスドメインの影響がないことが発見され、2 番目のソリューションが派生しました。

は、クライアントの呼び出しとさらなる処理のために、リモート サーバー上の js ファイルにデータをロードします。

jsonp.html

var url = "http://localhost:63342/ajax/jsonp.php?name=吕铭印&sex=男&callbackname=jsonp_callback"; //访问localhost:63342下的jsonp.php
var scriptTag = document.createElement("script"); //创建一个script标签
scriptTag.setAttribute("src",url); //设置script的src属性
document.body.appendChild(scriptTag); //将script标签添加到body中
//回调函数
var jsonp_callback = function(resultObj){
document.getElementById("box").innerHTML = resultObj.name+":"+resultObj.sex;
}
jsonp.php
$name = $_GET["name"];
$sex = $_GET["sex"];
$callbackname = $_GET["callbackname"]; //回调函数名称
echo "$callbackname({name:'$name',sex:'$sex'})";

実装原則: スクリプト タグを使用したリモート JS ファイルの呼び出しはクロスドメインの影響を受けないため、スクリプト タグを作成し、src 経由でリモート ファイルにアクセスできます。属性。 。

実はこれはAJAXには属さないのですが、AJAXと同様の機能を実現できます。

3 番目のメソッド XMLHttpRequest レベル 2: HTML5 によって提供される XMLHttpRequest レベル 2 には、クロスドメイン アクセスとその他の新機能が実装されています

これはリモート サーバーで実行する必要があります次のコード

header('Access-Control-Allow-Origin:*'); //*代表可访问的地址，可以设置指定域名
header('Access-Control-Allow-Methods:POST,GET');

を追加して、クライアント側で通常の AJAX コードを使用できるようにします。

要約: プロキシの実装は最も面倒ですが、最も広く使用されており、AJAX をサポートするブラウザであればこの方法を使用できます。

JSONP は比較的単純ですが、サポートされるのは GET 呼び出しのみです。

XHR2 が最もシンプルですが、HTML5 のみをサポートしているため、モバイル端末向けに開発する場合は、XHR2 を使用することを選択できます。

[関連チュートリアルの推奨事項:

AJAX ビデオ チュートリアル]

以上がAjax でクロスドメインの問題を解決するにはいくつかの方法がありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。