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

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

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

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

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

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

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

2. 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 サイトの他の関連記事を参照してください。