Vue アプリケーションで vue-resource を使用するときに「ローカルリソースのロードが許可されていません: file:///xxx」というメッセージが表示された場合はどうすればよいですか?-Vue.js-php.cn

Vue アプリケーションで vue-resource を使用するときに「ローカルリソースのロードが許可されていません: file:///xxx」というメッセージが表示された場合はどうすればよいですか?

WBOY

リリース： 2023-06-25 10:02:11

オリジナル

4626 人が閲覧しました

Vue.js は人気のあるフロントエンドフレームワークであり、多くの人がプロジェクトで Vue.js を使用しています。 Vue.js 開発では、vue-resource プラグインを使用して非同期リクエスト操作を実行することがよくあります。ただし、ローカル環境で vue-resource を使用すると、「ローカルリソースのロードが許可されていません: file:///xxx」というエラーメッセージがコンソールに表示されることがあります。この問題の解決策を詳しく紹介しましょう。

まず、このエラーの原因を理解する必要があります。これは、ブラウザのセキュリティメカニズムにより、ローカルファイルシステム上のファイルへの直接アクセスが制限されているためです。 Vue アプリケーションはローカルファイルシステムの HTML ファイルで実行され、ローカルファイルへのパスは非同期リクエストで使用されます。したがって、ブラウザはこれを悪意のあるリクエストであると判断し、傍受します。

この問題に対処するには、次の 2 つの異なるソリューションを採用できます。

ローカルサーバーを起動します

Vue.js で開発します。通常、ローカルサーバーを起動するには、「npm runserve」コマンドなどの npm コマンドを使用します。ローカルサーバーを起動すると、Vue.js アプリケーションはローカルファイルシステムではなくローカルサーバー上で実行できるようになります。このようにして、ブラウザーのセキュリティメカニズムの制限を回避し、vue-resource プラグインを使用して非同期リクエスト操作を実行できます。

vue-cli を使用してプロジェクトを作成した場合は、コマンドラインに「npm runserve」と入力してローカルサーバーを起動できます。起動後、ブラウザで localhost:8080 アドレスを開き、ページ上で vue-resource メソッドを呼び出します。

HTTP プロトコルの使用

Vue.js アプリケーションをローカルファイルシステムで実行し、ローカルサーバーを起動したくない場合は、次のように使用できます。非同期リクエストアクションのHTTPプロトコル。

HTTP プロトコルは次の 2 つの方法で使用できます。

(1) 非同期リクエストのパスを変更します。

非同期リクエストを変更することで HTTP プロトコルを使用できます。パス。たとえば、リクエストアドレス http://localhost:8080/mockData.json を http://127.0.0.1:8080/mockData.json に変更し、ブラウザで http://127.0.0.1:8080 を開くことができます。 file:// プロトコルを使用する代わりに。

(2) Chrome ブラウザの --allow-file-access-from-files フラグを使用します。

Chrome ブラウザの --allow-file-access-from-files フラグを使用して、ブラウザがローカルファイルシステムにアクセスできるようにします。このタグは Chrome ブラウザにのみ適用されることに注意してください。

Windows オペレーティングシステムでは、コマンドプロンプト (cmd) で次のコマンドを入力する必要があります:

chrome.exe --allow-file-access-from-files

ログイン後にコピー

MacOS オペレーティングシステムでは、ターミナルを開いて次のコマンドを入力する必要があります。コマンド:

open -a Google Chrome --args --allow-file-access-from-files

ログイン後にコピー

別のブラウザを使用している場合は、ローカルファイルシステムを許可するためにブラウザの対応する設定方法を確認する必要があります。

一般に、Vue.js の開発では、「ローカルリソースのロードが許可されていません: file:///xxx」というエラーを回避できます。ローカルファイルシステム上で Vue.js アプリケーションを実行する場合は、HTTP プロトコルを使用するか、コマンドラインに「npm runserve」コマンドを入力してローカルサーバーを起動するか、または --allow-file を使用することができます。 Chrome ブラウザの -access-from-files フラグを使用します。これらのメソッドにより、vue-resource プラグインを使用して非同期リクエスト操作を実行できるようになります。

以上がVue アプリケーションで vue-resource を使用するときに「ローカルリソースのロードが許可されていません: file:///xxx」というメッセージが表示された場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。