ホームページ > 記事 > ウェブフロントエンド > JavaScript におけるクロスドメインの問題の解決策を共有する
JavaScript におけるクロスドメインの問題の解決策を共有する
- 黄舟オリジナル
- 2017-07-18 10:02:191440ブラウズ
この記事では、主に JavaScript のクロスドメインの問題と解決策に関する関連情報を紹介します。必要な友人は、
JavaScript のクロスドメインの問題と解決策を参照してください
クロスドメイン問題とは何ですか?
このクロスドメインの問題は、ブラウザの同一生成元ポリシーによって発生します。要求された URL アドレスは、ブラウザの URL と同じプロトコル、同じドメイン名、同じポートである必要があります。そうでない場合、アクセスは許可されません
| ブラウザのURL | アクセスするURL | 結果 |
|---|---|---|
| http://www.123.com/index | http://www.123.com/server | 成功 |
| http://www.123.com/index | http://www.456.com/server | ドメイン名は異なり、クロスドメインです |
| http://www.123.com: 8080/index | http://www.123.com:8888/index.htm | 異なるポート、クロスドメイン |
| http://www.123.com/index | https://www .123.com /index | 異なるプロトコル、クロスドメイン |
ソリューション
script、img、iframeタグなど、src属性を持つタグはクロスドメイン可能
JSONP
JSONP はスクリプト タグのアプリケーションであり、JSONP の正式名称は JSON With Padding です。JSONP は、コールバック関数とデータの 2 つの部分で構成されます。コールバック関数は、応答が到着したときにページ内で呼び出される関数です。データはコールバック関数に渡されるJSONデータです
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function jsonCallback(data){
alert(data);
};
var url = "http://localhost:8888/test?callback=jsonCallback";
var script = document.createElement('script');
script.type = "text/javascript";
script.setAttribute('src', url);
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>
<body>
</body>
</html>欠点: JSONPリクエストが失敗したかどうかを確認するのは簡単ではありません
セキュリティの問題、JSONP他のドメインからコードを読み込んで実行するので、その信頼性を確認してください
クロスドメインの問題の理由
クロスドメインの問題は、ブラウザの相同性ポリシーの制限によります。現在のドメイン名の JS は、同じドメイン名のウィンドウ属性のみを読み取ることができます。ドメイン。
クロスドメイン問題のシナリオ
他の Web サイトからデータを取得するためにページで js が使用される場合、天気、速達、またはその他のデータ インターフェイスをリクエストするために Web サイトで ajax が使用される場合など、クロスドメインの問題が発生します。他の Web サイトからデータをリクエストすると、ブラウザーに次のエラーが表示されます。このシナリオでは、js のクロスドメインの問題を解決する必要があります。
XMLHttpRequest cannot load http://你请求的域名. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://当前页的域名' is therefore not allowed access.
クロスドメインの問題はどのような状況で発生しますか?
Web サイトの URL には、プロトコル名、サブドメイン名、メインドメイン名、ポート番号が含まれます。たとえば、https://github.com/ の場合、https はプロトコル名、www はサブドメイン名、github はメイン ドメイン名、ポート番号は 80 です。ページ内の URL からデータをリクエストする場合、この URL のプロトコル名、サブドメイン名、メインドメイン名、ポート番号のいずれかが異なる場合、クロスドメインの問題が発生します。
http://localhost:80/ ページリクエスト http://127.0.0.1:80/ であっても、クロスドメインの問題が発生します
クロスドメインの問題の解決
クロスドメインの問題を解決するには、次の方法があります
jsonpを使用する
サーバーサイドプロキシ
サーバーはリクエストヘッダーにAccess-Control-Allow-Originを設定してデータを取得できるドメイン名を指定します
jsonpの解決策
json≠jsonp
原則
クロスドメインの問題を解決する jsonp の原理 はい、ブラウザーのスクリプト タグは同一生成元ポリシーによって制限されません (Web ページ内のスクリプトの src 属性を設定して、CDN サーバー内の静的ファイルのパスを問い合わせることができます) 。次に、script タグを使用してサーバーからデータを取得できます。リクエスト時に、callbakc=? というパラメータを追加します。ここで、? は実行するコールバック メソッドです。
以上がJavaScript におけるクロスドメインの問題の解決策を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。