Was soll ich tun, wenn bei der Verwendung von vue-resource in einer Vue-Anwendung „Lokale Ressource darf nicht geladen werden: Datei:///xxx' angezeigt wird?

Vue.js ist ein beliebtes Front-End-Framework und viele Leute verwenden Vue.js in ihren Projekten. In der Vue.js-Entwicklung verwenden wir häufig das Vue-Resource-Plug-In, um asynchrone Anforderungsvorgänge durchzuführen. Wenn wir jedoch vue-resource in einer lokalen Umgebung verwenden, erscheint möglicherweise die Fehlermeldung „Lokale Ressource darf nicht geladen werden: file:///xxx“ in der Konsole. Lassen Sie uns die Lösung für dieses Problem im Detail vorstellen.

Zuerst müssen wir die Ursache dieses Fehlers verstehen. Dies liegt daran, dass der Sicherheitsmechanismus des Browsers den direkten Zugriff auf Dateien im lokalen Dateisystem einschränkt. Vue-Anwendungen werden in HTML-Dateien im lokalen Dateisystem ausgeführt und der Pfad zur lokalen Datei wird in asynchronen Anforderungen verwendet. Daher geht der Browser davon aus, dass es sich um eine böswillige Anfrage handelt, und fängt sie ab.

Um dieses Problem anzugehen, können wir zwei verschiedene Lösungen anwenden, wie folgt:

1. Starten Sie den lokalen Server

Bei der Entwicklung von Vue.js verwenden wir im Allgemeinen den Befehl npm, um den lokalen Server zu starten, wie zum Beispiel „ npm run dienen“-Befehl. Nach dem Start des lokalen Servers kann die Vue.js-Anwendung auf dem lokalen Server statt in unserem lokalen Dateisystem ausgeführt werden. Auf diese Weise können wir Einschränkungen des Browser-Sicherheitsmechanismus vermeiden und das Vue-Resource-Plug-In verwenden, um asynchrone Anforderungsvorgänge auszuführen.

Wenn Sie das Projekt mit vue-cli erstellt haben, können Sie in der Befehlszeile „npm run servo“ eingeben, um den lokalen Server zu starten. Öffnen Sie nach dem Start die Adresse localhost:8080 im Browser und rufen Sie die vue-resource-Methode auf der Seite auf.

2. Verwenden des HTTP-Protokolls

Wenn wir die Vue.js-Anwendung weiterhin im lokalen Dateisystem ausführen und den lokalen Server nicht starten möchten, können wir das HTTP-Protokoll verwenden, um asynchrone Anforderungsvorgänge auszuführen.

Wir können das HTTP-Protokoll auf die folgenden zwei Arten verwenden:

(1) Ändern des asynchronen Anforderungspfads:

Wir können das HTTP-Protokoll verwenden, indem wir den asynchronen Anforderungspfad ändern. Beispielsweise können wir die Anforderungsadresse http://localhost:8080/mockData.json in http://127.0.0.1:8080/mockData.json ändern und http://127.0.0.1:8080 im Browser öffnen. Anstatt das Protokoll file:// zu verwenden.

(2) Verwenden Sie das Flag --allow-file-access-from-files des Chrome-Browsers.

Wir können das Flag --allow-file-access-from-files des Chrome-Browsers verwenden, um dem Browser den Zugriff auf das lokale Dateisystem zu ermöglichen. Bitte beachten Sie, dass dieses Tag nur für den Chrome-Browser gilt.

Im Windows-Betriebssystem müssen wir den folgenden Befehl in die Eingabeaufforderung (cmd) eingeben:

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

Im MacOS-Betriebssystem müssen wir das Terminal öffnen und den folgenden Befehl eingeben:

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

Wenn Sie ein anderes verwenden Browser-Browser müssen Sie die entsprechenden Einstellungen des Browsers überprüfen, um lokale Dateisysteme zuzulassen.

Im Allgemeinen können wir bei der Entwicklung von Vue.js den Fehler „Lokale Ressource darf nicht geladen werden: file:///xxx“ vermeiden. Wenn Sie Ihre Vue.js-Anwendung im lokalen Dateisystem ausführen möchten, können Sie das HTTP-Protokoll verwenden oder den Befehl „npm run dienen“ in der Befehlszeile eingeben, um den lokalen Server zu starten, oder wenn Sie --allow-file verwenden Verwenden der Chrome-Browser-Flagge „-access-from-files“. Mit diesen Methoden können wir das Vue-Resource-Plug-In verwenden, um asynchrone Anforderungsvorgänge durchzuführen.

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn bei der Verwendung von vue-resource in einer Vue-Anwendung „Lokale Ressource darf nicht geladen werden: Datei:///xxx' angezeigt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!