JavaScript におけるクロスドメインの問題の解決策を共有する-jsチュートリアル-php.cn

JavaScript におけるクロスドメインの問題の解決策を共有する

黄舟

リリース： 2017-07-18 10:02:19

オリジナル

1439 人が閲覧しました

この記事では、主に 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(&#39;script&#39;); 
  script.type = "text/javascript";
  script.setAttribute(&#39;src&#39;, url); 
  document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);
</script>
</head>
<body>
</body>
</html>

ログイン後にコピー

欠点: JSONPリクエストが失敗したかどうかを確認するのは簡単ではありません

セキュリティの問題、JSONP他のドメインからコードを読み込んで実行するので、その信頼性を確認してください

クロスドメインの問題の理由

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

クロスドメイン問題のシナリオ

他の Web サイトからデータを取得するためにページで js が使用される場合、天気、速達、またはその他のデータインターフェイスをリクエストするために Web サイトで ajax が使用される場合など、クロスドメインの問題が発生します。他の Web サイトからデータをリクエストすると、ブラウザーに次のエラーが表示されます。このシナリオでは、js のクロスドメインの問題を解決する必要があります。

XMLHttpRequest cannot load http://你请求的域名. No &#39;Access-Control-Allow-Origin&#39; header is present on the requested resource. Origin &#39;http://当前页的域名&#39; 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 サイトの他の関連記事を参照してください。