ホームページ > 記事 > ウェブフロントエンド > Javascript のクロスドメイン知識の詳細な紹介
Javascript のクロスドメイン知識の詳細な紹介
- 高洛峰オリジナル
- 2016-11-05 16:37:281337ブラウズ
JS クロスドメインの知識まとめ:
「クロスドメイン」という言葉が頻繁に登場する前から、実は私たちはよく使っていました。たとえば、Web サイト A の img では、src は Web サイト B の特定の画像アドレスを指します。これは、(ホットリンク対策技術に関係なく) 通常の状況では正常に表示されることに疑いの余地はありません。 script タグの は、他の Web サイトのスクリプト リソースを指すことができます (場合によっては、他の Web サイトの負荷を最大限に活用し、独自のサーバーの同時実行性を減らすために、これが推奨される場合もあります)。ただし、js を使用して、ajax などの他の Web サイトからデータを積極的にリクエストすると、通常クロスドメインと呼ばれる、イライラするクロスドメインの問題が発生します。セキュリティ上の理由により、主要なブラウザではクロスドメイン アクセスがデフォルトで禁止されています。これには、同一オリジン ポリシーの概念が含まれます。同一オリジン ポリシーは、あるドメインから読み込まれたスクリプトが別のドメインのドキュメント属性を取得または操作することを防ぎます。つまり、要求された URL のドメインは、現在の Web ページのドメインと同じである必要があります。これは、ブラウザがさまざまなソースからコンテンツを分離して、ソース間での操作を防止することを意味します。
このブロガーは、クロスドメインの問題によって引き起こされる特定のセキュリティ問題については詳しく説明していないため、誰もが自分で判断できます。
しかし、多くの場合、特にインターネットが発展し続ける今日では、クロスドメイン アクセス方法が標準化される前に、さまざまなパートナーやデータ プロバイダーにフロントエンド インターフェイスを要求する必要があります (クロスドメイン アクセスの要件を参照)。情報によると、html5 WebSocket 標準はクロスドメイン データ交換をサポートしており、将来的にはオプションのクロスドメイン データ交換ソリューションになるはずです。)その制限を回避しますか？答えはたくさんありますが (どれも面倒ですが)、最も一般的に使用されているのは、いわゆる JSONP クロスドメインです。
JSONP の原則
JSONP の最も基本的な原則は、<script>标签，而script标签的src属性是没有跨域的限制的。这样说来，这种跨域方式其实与ajax XmlHttpRequest协议无关了。</script>
JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。如果要进行跨域请求， 我们可以通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码。 这种跨域的通讯方式称为JSONP。
来个简单的例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test Jsonp</title>
<script type="text/javascript">
function jsonpCallback(result)
{
alert(result.msg);
}
</script> を動的に追加することです。
<script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script>
</head>
<body>
</body>
</html>原理とプロセスを簡単に説明します。まずクライアントでコールバックを登録し、次にコールバックの名前をサーバーに渡します (ここで、クライアントとサーバーはキーを jsonp のクエリ文字列値として渡すことに同意します)。この時点で、サーバーはまず json データを生成します。 次に、JavaScript 構文を使用して関数を生成します。関数名は、渡されたパラメーター jsonp です。最後に、json データがパラメーターとして関数に直接配置されるため、js 構文ドキュメントが生成され、クライアントに返されます。クライアント ブラウザは script タグを解析し、返された JavaScript ドキュメントを実行します。つまり、事前定義されたコールバック関数を実行します。
上記の簡単な説明から推測できます: js コード フラグメントを関数の形式で返すことに加えて、サーバーは仕様を満たすすべての実行可能な js フラグメントを自然に返すことができます。
JSONP の欠点は、GET リクエストのみをサポートし、POST などの他のタイプの HTTP リクエストはサポートしないこと、クロスドメイン HTTP リクエストのみをサポートし、異なるドメインの 2 つのページ間で JavaScript 呼び出しを行う方法の問題を解決できないことです。 (下記も参照) jQuery の
Jsonp
前に述べたように、jsonp は ajax リクエストではありませんが、jQuery はクロスドメインリクエストに対して jQuery.ajax と一貫したメソッドを提供します:
$.ajax({
url: 'http://crossdomain.com/jsonServerResponse',
type: 'GET',
dataType: 'jsonp',
jsonp: "callback",
jsonpCallback: 'functionName',
success: function (data, textStatus, jqXHR) { }
//……
});上に示すように、dataType は次のように設定されます。 jsonp。これはクロスドメインリクエストです。jsonp は関数名を渡すためにサーバーによって事前に設定されたクエリ文字列キーに設定され、jsonpCallback が設定されていない場合は、jQuery がランダムな関数名を生成します。 (ウィンドウ オブジェクトのグローバル関数の読み込みでは、コードが挿入されると関数が実行され、実行後に削除されます) 自動生成された関数は、上記のコードの成功関数をコールバックすると推測できます。 (手動で jsonpCallback に値を割り当てるとき、success 関数がコールバックするのか、それとも jQuery が事前定義された関数を探し、見つからない場合はエラーを報告するのか疑問に思います。ブロガーは怠け者です。後でもう一度試してください。)もちろん、jQuery は、単純なバージョンの $.getJSON を提供します。ここでは説明しません。
注意する必要があるのは、ajax リクエストの jqXHR パラメーターであり、XMLHTTPRequest オブジェクト (継承またはカプセル化) と見なすこともできます。 XMLHTTPRequest の最も有用な情報を提供してください。XMLHTTPRequest のリクエスト ステータス情報が欠如しているため、エラー、完了などのほとんどのコールバック関数をトリガーできません。(jQuery1.9.0) 、そしてコールバックできる成功関数はおそらくscriptタグのloadイベントによってトリガーされるはずであり、XMLHTTPRequestのステータスに依存するajaxの仕組みとはまったく異なります。テストの結果、jQuery から生まれた zepto (v1.1.3) では、jsonp リクエストでエラーが発生しました。たとえば、js ドキュメントをロードするときにヘッダーが 401 エラーを返すと、エラー関数が実行されます。この関数の jqXHR パラメータも本物の jqXHR タイプではないため、この場合、特定のリンクで問題が発生したことが通知されるだけですが、それはわかりません。特定のエラー情報。応答ヘッダーに有用な情報が含まれるシナリオと同様に、ブロガーは jsonp の使用を推奨しません。jsonp を使用するための前提条件は、ネットワーク異常などの非ビジネス例外に加えて、すべてのビジネス例外であると言えます。サーバーから受信したリクエストです）応答応答期間中にスローされたすべての例外）は、クライアントのコールバック分析を容易にするために、リクエスト結果の形式でクライアントに直接返す必要があります。
読んでいただきありがとうございます。皆さんのお役に立てれば幸いです。このサイトのご支援に感謝します。