クロスドメインとは何か、そしてその解決方法

クロスドメインについて聞いたことがある人は多いと思いますが、クロスドメインの意味を知らない人も多いと思います。そこで、クロスドメインとは何か、その解決方法について説明します。

1: クロスドメインとは

クロスドメインとは、ブラウザーが他の Web サイトからのスクリプトを実行できないことを意味します。これは、ブラウザの同一オリジン ポリシーによって発生します。これは、JavaScript 上でブラウザによって実装されるセキュリティ制限です。ブラウザーが、あるドメイン名の Web ページから別のドメイン名にリソースを要求する場合、ドメイン名、ポート、またはプロトコルの違いはクロスドメインとみなされます。

2: クロスドメインの問題を解決する方法

1. jsonp クロスドメイン

JSONP (パディング付き JSON: 塗りつぶされた JSON)、1 つJSON のアプリケーションの新しいメソッド

JSON と JSONP の違い:

1. JSON はデータ文字列を返しますが、JSONP はスクリプト コード (関数呼び出しを含む) を返します

2. JSONP は get リクエストのみをサポートし、post リクエストはサポートしません

(スクリプト タグをページに追加し、src 属性を通じて指定されたアドレスに対するリクエストをトリガーするのと同様です。 Get リクエストのみ)

2. nginx リバース プロキシ:

www.baidu.com/index.html は www.sina.com/server.php を呼び出す必要があります。インターフェイス www.baidu.com/server.php、by このインターフェイスはバックエンドで www.sina.com/server.php を呼び出し、戻り値を取得し、それをindex.html

3に返します。 PHP側でheaderを変更

header(' Access-Control-Allow-Origin:*') //すべてのソースからのアクセスを許可

header('Access-Control-Allow-Method:POST) ,GET'); //アクセス方法を許可する

４、document.domain

クロスドメインは、xhr が異なるソースからのドキュメントにアクセスできないタイプと、もう 1 つのタイプに分けられます。異なるウィンドウは相互に対話できないということです。

document.domain は主に 2 番目の状況を解決し、メイン ドメインが同じでサブドメインが異なる場合にのみ適用できます。 ##document.domain の設定は制限されており、document.domain をそれ自体または上位レベルの親ドメインにのみ設定でき、プライマリ ドメインは同じである必要があります。例: a.b.example.com のドキュメントの document.domain は、a.b.example.com、b.example.com、example.com のいずれかに設定できますが、c.a.b.example.com には設定できません。は現在のものです。メイン ドメインはもう同じではないため、ドメインのサブドメインを baidu.com に設定することはできません。

5. Window.name キーポイント: window.name はページのライフサイクルで window.name を共有します;

互換性: すべてのブラウザーがサポートします;

利点:

ブラウザ機能を使用して異なるドメイン間でデータを転送する最も簡単な方法。

フロントエンドとバックエンドの特別な準備は必要ありません。

欠点:

サイズ制限: window.name の最大サイズは約 2M で、ブラウザごとに異なる規則が存在します。

セキュリティ: 現在のページ上のすべてのウィンドウは変更される可能性があり、これは非常に危険です。 ;

データ型: 渡されるデータは文字列のみに制限されます。オブジェクトまたはその他の場合は、自動的に文字列に変換されます。

6、postMessage

重要なポイント:

postMessage は、h5 によって導入された新しい概念であり、一連のカプセル化も行われています。 window.postMessage を通じて使用でき、送信されるメッセージを監視できます。

互換性: モバイル端末は安心して使用できますが、PC 端末はダウングレードする必要があります。

利点

クロスドメインは、1 つの関数と 2 つのパラメーター (URL の要求、データの送信) だけでバックエンドの介入なしで実現できます。

優れたモバイル互換性;

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