研究ノート-JavaScriptのクロスドメインの問題


jsでは、クロスドメインの問題を解決する方法は非常に重要なコンテンツです。クロスドメインはcorsを発行します:クロスオリジンリソースシェア。

同一生成元ポリシー:プロトコル、ポート、ドメイン名が同じページの場合にのみ、2つのページのソースが同じになります。ウェブサイトのプロトコル、ホスト、ポート番号が異なる限り、ウェブサイト間のデータ要求と送信はクロスドメインコールを構成し、同一生成元ポリシーによって制限されます。

 

注:どのような種類のクロスドメインでも、サーバー側の連携が必要であり、サーバー側が主要なクロスドメインです。

 

1.当然のことながらクロスドメインラベル:

jsには、image imgやスクリプトスクリプトなど、自然にクロスドメインになり得るタグがいくつかあります。

srcにタグを付けることは、本質的にクロスドメインです。

短所:Getリクエストのみを送信でき、サーバーの応答テキストにアクセスできません(一方向のリクエストのみ)。

2.クロスドメイン(クロスページメッセージング)にpostMessageを使用します。

// 父  目标.contentWindow.postMessage()
window.addEventListener('message', function(e) { alert(e.data); });
document.querySelector('iframe').contentWindow.postMessage('myMessage', '/'); // '/'表示同域 '*'所有
// 子  找父窗口:window.top || window.parentWindow
window.addEventListener('message', function(e) { alert(e.data);  }); // 在监听事件内找父窗口 e.source
window.parentWindow.postMessage();

3. JSONPクロスドメイン:

最初のステップ:ドメイン間でデータを取得した後に何をすべきかを考え、コールバック関数を記述します。

ステップ2:スクリプトタグのクロスドメインの性質を利用して、サーバーを要求し、JavaScriptコードの一部を取得して、戻って実行します。このコードは、コールバック関数を呼び出すコードです。

ステップ3:サーバーは協力して、jsコードの一部を返します。

<script>
    function callback(data) {
        console.log('拿到的数据:' + data);
        }
</script>
<script src="http://localhost:8888?key=callback"></script>
// 服务器
res.end(`${ funcName }(${ JSON.stringify(data) })`);

4.CORSクロスドメイン:

$.ajax({
    	url: 'http://localhost:8888',
    	success: function(data) {
    		console.log(data);
    	}
});
// 服务器
res.setHeader('Access-Control-Allow-Origin', '*');  // 允许所有请求跨域
res.setHeader('Access-Control-Allow-Methods', 'GET,POST,DELETE')  // 允许请求的类型
res.setHeader('Access-Control-Allow-Headers', 'X-PINGOTHER, Content-Type') // 预检请求
res.setHeader('Access-Control-Max-Age', '1000') // 请求最大响应时间
res.setHeader("Access-Control-Allow-Credentials", 'true') // 是否携带cookie
// ajax设置
"withCredentials": true

5.window.name + iframe:

利用される機能:iframeタグのクロスドメイン機能、ドキュメントの更新後もwindow.name属性値が存在する機能(最大許容数は約2M)。

document.querySelector('iframe').contentWindow.name = '张三'; 

6.サブドメイン間でdocument.domainを変更します。

 前提条件:これらの2つのドメイン名は、同じ基本ドメイン名に属している必要があります。さらに、使用するプロトコルとポートは一貫している必要があります。そうでない場合、document.domainはクロスドメインに使用できないため、サブドメインのみをクロスできます。

現在、aaa.xxx.comとbbb.xxx.comの2つのドメイン名があります。aaaの下にbbbが埋め込まれているページは、document.nameに一貫性がないため、aaaの下でbbbjsを操作できません。document.name = 'xxx.com';を設定して、相互アクセスを実現するために、jsを介してaaaおよびbbbで一貫性を保つことができます。

7.WebSocket:

クロスドメイン通信を可能にしながら、ブラウザとサーバー間の全二重通信を実装します。これは、サーバープッシュテクノロジーの優れた実装です。

短所:WebSocketオブジェクトはDOMレベル2のイベントリスナーをサポートしておらず、各イベントはDOMレベル0の構文を使用して個別に定義する必要があります。

8.代理店:

同一生成元ポリシーはブラウザ側の制限です。問題はサーバー側で解決できます。DomainAクライアント(ブラウザ)=> DomainAサーバー=> DomainBサーバー=> DomainAクライアント(ブラウザ)。

たとえば、reactプロジェクトがプロキシを使用する場合、package.jsonノードで「proxy」プロパティを構成できます。


上記は、インターネット上の一部の大物がよく使用する方法ですが、現在、それらのほとんどは、自然なクロスドメインタグ、CORSクロスドメイン、および構成プロキシの3つの方法を使用しています。

おすすめ

転載: blog.csdn.net/qq_41339126/article/details/109479335