クロスドメイン JavaScript を使用する理由は何ですか?

JavaScript がクロスドメインになる理由: ブラウザーの同一オリジン ポリシー制限により、現在のドメイン名の JS は同じドメイン内のウィンドウ属性しか読み取れないため、クロスドメインが発生します。同一生成元ポリシーとは、ユーザー情報のセキュリティを確保し、悪意のある Web サイトによるデータの盗難を防ぐために、ブラウザーが異なるドメイン間の JS 対話を禁止することを意味します。

このチュートリアルの動作環境: Windows 10 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

クロスドメイン JavaScript の理由は何ですか?

クロスドメインの問題は、ブラウザーの同一オリジン ポリシーによって制限されています。現在のドメイン名の JS はウィンドウ属性のみを読み取ることができます。同じドメイン内にあります。

ブラウザの同一生成元ポリシーの制限のため。同一オリジン ポリシーは規約です。これはブラウザの中核で最も基本的なセキュリティ機能です。同一オリジン ポリシーが存在しない場合、ブラウザの通常の機能が影響を受ける可能性があります。 Web は同一生成元ポリシーに基づいて構築されていると言えます。ブラウザは同一生成元ポリシーの実装にすぎません。同一生成元ポリシーは、あるドメインの JavaScript スクリプトが別のドメインのコンテンツと対話することを防ぎます。いわゆる同じオリジン (つまり、同じドメイン内) とは、2 つのページが同じプロトコル、ホスト、ポート番号を持つことを意味します。

簡単に言えば、同一生成元ポリシーとは、ユーザー情報のセキュリティを確保し、悪意のある Web サイトによるデータの盗難を防ぐために、ブラウザーが異なるドメイン間の JS 対話を禁止することを意味します。ブラウザの場合、ドメイン名、プロトコル、ポートのいずれかが異なる限り、同一生成元ポリシーがトリガーされ、ブラウザ間の次のやり取りが制限されます:

1. Cookie、LocalStorage、および IndexDB は使用できません。読み取る;

2.DOM を取得できません;

3.AJAX リクエストを送信できません。

クロスドメインの厳密な定義は、プロトコル、ドメイン名、ポートが異なる限り、クロスドメインとみなされます。

クロスドメイン ソリューション

JSONP: dataType: "jsonp" をリクエスト メソッドに追加する必要があります。 //データ形式は jsonp に設定されます、jsonp: "callback" , //Jquery

1, dataType によって生成される検証パラメーターの名前。このパラメーターは jsonp

2 に設定する必要があります。jsonp、このパラメーターの値は次のように設定する必要があります。サーバーとの合意

nginx reverse proxy

webpack リバース プロキシの構成: スキャフォールディング devServer を直接使用してリバース プロキシを構成し、開発プロセス中にクロスドメインの問題を解決します

クロスドメイン リソース共有 (CORS)

Nodejs クロスドメイン: nodejs を使用してサーバーをローカルにセットアップし、そのサーバーを使用してバックグラウンド サーバーを呼び出してデータを返し、それをフロントエンドに返します。サーバー間のクロスドメインはありません。

WebSocket プロトコルのクロスドメイン

JSONP 経由

自分で理解してください: JSONP は、クロスドメインを実現するには script タグを使用します。get リクエストのみを使用できます。バックグラウンドでメソッドが返されます。渡すと、このメソッドが必要なデータを取得します。

jsonp 原則 フロントエンドはメソッドを定義し、 src 属性を通じてそれをバックエンドに渡します。バックエンドがメソッドを取得した後、データ スプライシング メソッドを渡し、それをフロントエンドに渡します。フロントエンドはそれをメソッドとして呼び出します

JSONP は主に、カプセル化されたリクエスト メソッドにコールバックを追加します。このコールバックはフロント エンドとバック エンドによって合意されています。

関連する推奨事項: JavaScript 学習チュートリアル

以上がクロスドメイン JavaScript を使用する理由は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。