ブラウザにローカル HTML ファイルをロードすると CORS エラーが発生するのはなぜですか?

HTML でのローカル リソースのロード: CORS エラー

ローカル HTML ファイルをロードするときに、「Origin null は by によって許可されていません」というエラーが発生する場合があります。アクセス制御-許可-オリジン。」これは、ほとんどのブラウザに実装されている同一オリジン ポリシー (SOP) によるものです。

SOP は、ユーザーのデータとプライバシーを保護するためにクロスオリジン アクセスを制限します。この場合、ローカル ファイル システムはブラウザとは別の「オリジン」とみなされ、そこからファイルを直接ロードすることは禁止されます。

エラーの原因

提供されたコードでは、「weather.xsl」ファイルを

にロードしようとしています。 jQueryのload()メソッドを使用します。ただし、「weather.xsl」はローカル ファイルであるため、SOP によりブラウザがアクセスできなくなります。

解決策

残念ながら、AJAX を使用したローカル リソースの直接読み込みSOP により、リクエストは許可されません。代わりに、次の解決策を検討してください:

• ローカル Web サーバーをインストールします: Apache や Nginx などの Web サーバーをインストールし、ローカル サーバーで HTML ファイルをホストします。これにより、HTTP 経由でファイルにアクセスするための URL が提供されますが、SOP は適用されません。
• Chrome 拡張機能を使用します: 「Allow CORS: Access-Control-」のような Chrome 拡張機能があります。 「Allow-Origin」を使用すると、ローカル ファイルの SOP を一時的に無効にすることができ、HTML 出力を
  .
• データ URI を使用する: 「weather.xsl」からの HTML 出力をデータ URI に変換し、HTML ページに直接埋め込みます。これにより、別のオリジンからファイルを読み込むことがなくなります。

注:

これらの回避策はすべてのシナリオに適しているわけではないため、適切である必要があることを覚えておくことが重要です。テスト目的でのみ使用されます。運用環境の場合、ファイルを Web サーバーにデプロイすることをお勧めします。

以上がブラウザにローカル HTML ファイルをロードすると CORS エラーが発生するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：php.cn

前の記事：Ajax チャット アプリケーションで Div を一番下までスクロールしたままにする方法は? 次の記事：Rails 4 および 5 のターボリンクで $(document).ready() を使用する方法は?

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

最新の問題

function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";

から 2024-04-29 11:01:01

0

3

2174

Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?

から 2024-04-23 00:22:19

0

11

2326

子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。

から 2024-04-19 15:37:47

0

1

1958

親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');

から 2024-04-18 23:52:34

0

1

1840

CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

1888

関連トピック

詳細>

• win8wifi接続が利用できない場合の対処方法
• iqooneo8とiqooneo9の比較分析
• Pythonでfit関数を使う方法
• ソリッド ステート ドライブのデータ復旧
• 単語の背景色を白に変更します
• Google Earth がサーバー ソリューションに接続できない
• 携帯電話の番号が空白になる理由は何ですか?
• CSSが表示を超えています...