導入
フロントエンド開発では、クロスドメインの問題は非常に一般的な問題です。この記事では、クロスドメインとは何か、一般的なクロスドメインのシナリオ、一般的に使用されるさまざまなクロスドメイン ソリューションについて詳しく紹介します。
クロスドメインとは
クロスドメインとは、ブラウザーで別のドメイン名でリソースのリクエストを開始する Web ページまたは Web アプリケーションを指します。ブラウザーの同一オリジン ポリシー制限により、このようなクロスドメイン リクエストはブラウザーによって傍受されます。
同一生成元ポリシーとは、以下を指します。
- 相同性とは、プロトコル、ドメイン名、ポートがまったく同じである場合にのみ、それらが同じ起源のものであるとみなされることを意味します。
- セキュリティ上の考慮事項により、異なるソースからの Web ページは、他の Web ページのコンテンツを読み取ったり、他の Web ページの JS インターフェイスを使用したりすることはできません。
一般的なクロスドメイン シナリオ
- フロントエンドとバックエンドを別々に開発する場合、フロントエンドがバックエンドAPIをリクエストします。
- CDN を使用してサードパーティの JS ライブラリをロードする
- フロントエンド ページには、他の Web サイトのコメント/共有およびその他のコンポーネントが埋め込まれています
- H5ページはミニプログラム/アプリと通信します
一般的に使用されるクロスドメイン ソリューション
1. JSONscript タグは同一生成元ポリシーによって制限されず、JSON を実装できます。
<script>
function callback(data) {
console.log(data);
}
</script>
<script src="http://other.com/api?callback=callback"></script>
2. コルス
CORS は W3 でもサポートされています。
let xhr = new XMLHttpRequest();
xhr.('GET', 'http://other.com/api');
xhr.send();
3. Nginxプロキシ
Nginx リバース プロキシを使用してクロスドメイン リクエストを実装します。
4.ポストメッセージ
iframe+postMessage を使用して、クロスウィンドウ通信を実現します。
5. ウィンドウ名
name 属性を使用して小さなデータを送信し、ソース間通信を実現します。
6. ウェブソケット
クロスドメイン通信をサポートするプロトコル。
上記の方法にはそれぞれ利点があり、実際の開発ではシナリオに応じて最適なソリューションを選択する必要があります。この記事がクロスドメインの問題解決の参考になれば幸いです。