Que dois-je faire si « Non autorisé à charger la ressource locale : fichier:///xxx » apparaît lors de l'utilisation de vue-resource dans une application Vue ?

Vue.js est un framework front-end populaire et de nombreuses personnes utilisent Vue.js dans leurs projets. Dans le développement de Vue.js, nous utilisons souvent le plug-in vue-resource pour effectuer des opérations de requête asynchrone. Cependant, lorsque nous utilisons vue-resource dans un environnement local, le message d'erreur « Non autorisé à charger la ressource locale : fichier:///xxx » peut apparaître dans la console. Présentons en détail la solution à ce problème.

Tout d’abord, nous devons comprendre la cause de cette erreur. En effet, le mécanisme de sécurité du navigateur restreint l'accès direct aux fichiers du système de fichiers local. Les applications Vue s'exécutent dans des fichiers HTML dans le système de fichiers local et le chemin d'accès au fichier local est utilisé dans les requêtes asynchrones. Par conséquent, le navigateur pensera qu’il s’agit d’une requête malveillante et l’interceptera.

Pour résoudre ce problème, nous pouvons adopter deux solutions différentes, comme suit :

1. Démarrer le serveur local

Dans le développement de Vue.js, nous utilisons généralement la commande npm pour démarrer le serveur local, comme " npm run serve". Après avoir démarré le serveur local, l'application Vue.js peut s'exécuter sur le serveur local plutôt que dans notre système de fichiers local. De cette façon, nous pouvons éviter les restrictions du mécanisme de sécurité du navigateur et utiliser le plug-in vue-resource pour effectuer des opérations de requête asynchrone.

Si vous avez créé le projet en utilisant vue-cli, vous pouvez saisir "npm run serve" sur la ligne de commande pour démarrer le serveur local. Après le démarrage, ouvrez l'adresse localhost:8080 dans le navigateur et appelez la méthode vue-resource sur la page.

2. Utilisation du protocole HTTP

Si nous souhaitons toujours exécuter l'application Vue.js dans le système de fichiers local et ne souhaitons pas démarrer le serveur local, nous pouvons utiliser le protocole HTTP pour effectuer des opérations de requête asynchrone.

Nous pouvons utiliser le protocole HTTP des deux manières suivantes :

(1) Modifier le chemin de la requête asynchrone :

Nous pouvons utiliser le protocole HTTP en modifiant le chemin de la requête asynchrone. Par exemple, nous pouvons changer l'adresse de requête http://localhost:8080/mockData.json en http://127.0.0.1:8080/mockData.json et ouvrir http://127.0.0.1:8080 dans le navigateur. Au lieu d'utiliser le protocole file://.

(2) Utilisez l'indicateur --allow-file-access-from-files du navigateur Chrome.

Nous pouvons utiliser l'indicateur --allow-file-access-from-files du navigateur Chrome pour permettre au navigateur d'accéder au système de fichiers local. Veuillez noter que cette balise s'applique uniquement au navigateur Chrome.

Dans le système d'exploitation Windows, nous devons saisir la commande suivante dans l'invite de commande (cmd) :

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

Dans le système d'exploitation MacOS, nous devons ouvrir le terminal et saisir la commande suivante :

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

Si vous utilisez un autre navigateur navigateur, vous devez vérifier les paramètres correspondants du navigateur pour autoriser les systèmes de fichiers locaux.

En général, dans le développement de Vue.js, nous pouvons éviter l'erreur « Non autorisé à charger la ressource locale : fichier:///xxx ». Si vous souhaitez exécuter votre application Vue.js dans le système de fichiers local, vous pouvez utiliser le protocole HTTP, ou entrer la commande "npm run serve" sur la ligne de commande pour démarrer le serveur local, ou utiliser --allow-file lorsque en utilisant l'indicateur -access-from-files du navigateur Chrome. Ces méthodes nous permettent d'utiliser le plug-in vue-resource pour effectuer des opérations de requête asynchrone.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!