web-dev-qa-db-fra.com

"Les demandes d'origine croisée ne sont prises en charge que pour HTTP." erreur lors du chargement d'un fichier local

J'essaie de charger un modèle 3D dans Three.js avec JSONLoader, et ce modèle 3D se trouve dans le même répertoire que le site Web entier.

Je reçois l'erreur "Cross Origin requests are only supported for HTTP.", mais je ne sais pas ce qui la cause ni comment y remédier.

javascriptfilehttp3dthree.js
691
corazza

Ma boule de cristal indique que vous chargez le modèle à l'aide de file:// ou C:/, qui reste fidèle au message d'erreur car ils ne sont pas http://.

Vous pouvez donc installer un serveur Web sur votre PC local ou télécharger le modèle ailleurs et utiliser jsonp et modifier l'URL en http://example.com/path/to/model

709
Andreas Wong

Juste pour être explicite - Oui, l'erreur dit que vous ne pouvez pas pointer directement votre navigateur sur file://some/path/some.html

Voici quelques options pour activer rapidement un serveur Web local afin de permettre à votre navigateur de restituer les fichiers locaux.

Python 2

Si vous avez installé Python ...

  1. Changez de répertoire dans le dossier où se trouve votre fichier some.html ou vos fichiers à l’aide de la commande cd /path/to/your/folder

  2. Démarrez un serveur Web Python à l'aide de la commande python -m SimpleHTTPServer

Cela démarrera un serveur Web pour héberger votre liste de répertoires complète à http://localhost:8000

  1. Vous pouvez utiliser un port personnalisé python -m SimpleHTTPServer 9000 vous donnant un lien: http://localhost:9000

Cette approche est intégrée à toute installation Python.

Python 3

Suivez les mêmes étapes, mais utilisez plutôt la commande suivante python3 -m http.server

Node.js

Sinon, si vous souhaitez une configuration plus réactive et utilisez déjà nodejs ...

  1. Installez http-server en tapant npm install -g http-server

  2. Passez dans votre répertoire de travail, où réside votresome.html 

  3. Démarrez votre serveur http en émettant http-server -c-1

Cela permet de générer un fichier httpd Node.js, qui sert les fichiers de votre répertoire sous forme de fichiers statiques accessibles à partir de http://localhost:8080

Rubis

Si votre langue préférée est le rubis ... les dieux du rubis disent que cela fonctionne aussi:

Ruby -run -e httpd . -p 8080

PHP

Bien sûr, PHP a aussi sa solution.

php -S localhost:8000
536
Scott Stensland

Dans Chrome, vous pouvez utiliser cet indicateur:

--allow-file-access-from-files

Lisez plus ici.

150
user669677

Couru à cela aujourd'hui.

J'ai écrit du code qui ressemblait à ceci:

app.controller('ctrlr', function($scope, $http){
    $http.get('localhost:3000').success(function(data) {
        $scope.stuff = data;
    });
});

... mais cela aurait dû ressembler à ceci:

app.controller('ctrlr', function($scope, $http){
    $http.get('http://localhost:3000').success(function(data) {
        $scope.stuff = data;
    });
});

La seule différence était le manque de http:// dans le deuxième extrait de code.

Je voulais juste le dire au cas où il y en aurait d'autres avec un problème similaire.

56
James Harrington

Il suffit de changer l'URL en http://localhost au lieu de localhost. Si vous ouvrez le fichier html à partir de local, vous devez créer un serveur local pour servir ce fichier html. La manière la plus simple consiste à utiliser Web Server for Chrome . Cela résoudra le problème.

31
Finn

Dans une application Android - par exemple, pour permettre à JavaScript d'accéder aux actifs via file:///Android_asset/ -, utilisez setAllowFileAccessFromFileURLs(true) sur la WebSettings obtenue en appelant getSettings() sur la WebView.

12
CommonsWare

Pour ceux qui utilisent Windows sans Python ou Node.js, il existe toujours une solution légère: Mongoose.

Tout ce que vous faites est de faire glisser l'exécutable à l'emplacement de la racine du serveur et de l'exécuter. Une icône apparaît dans la barre des tâches et vous permet d'accéder au serveur dans le navigateur par défaut.

De plus, Z-WAMP est un WAMP 100% portable qui s’exécute dans un seul dossier, c’est génial. C'est une option si vous avez besoin d'un serveur rapide PHP et MySQL.

10
bryc

Si vous utilisez Mozilla Firefox, cela fonctionnera comme prévu sans aucun problème. 

P.S. Même IE_Edge fonctionne bien, étonnamment !!

8
Yash P Shah

Je vais énumérer 3 approches différentes pour résoudre ce problème: 

  1. Utilisation d'un package npm très léger: Installez live-server à l'aide de npm install -g live-server. Ensuite, allez dans ce répertoire, ouvrez le terminal et tapez live-server et appuyez sur Entrée, la page sera servie à localhost:8080. BONUS: Il prend également en charge le rechargement à chaud par défaut.
  2. Utilisation d'un Google Chrome léger app développé par Google: Installez l'application, allez dans l'onglet des applications de Chrome et ouvrez-la. Dans l'application, pointez-le dans le bon dossier. Votre page sera servie!
  3. Modification du raccourci Chrome dans Windows: créez un raccourci du navigateur Chrome. Cliquez avec le bouton droit sur l'icône et ouvrez les propriétés. Dans les propriétés, éditez target en "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession" et enregistrez. Ensuite, à l'aide de Chrome, ouvrez la page à l'aide de ctrl+o. REMARQUE: Utilisez NOT avec ce raccourci pour une navigation normale.
7
BlackBeard

Utilisez http:// ou https:// pour créer une URL 

error: localhost:8080

solution: http://localhost:8080

4
KARTHIKEYAN.A

le moyen le plus rapide pour moi était: Pour les utilisateurs de Windows, exécutez votre fichier sur le problème résolu de Firefox, ou Si vous voulez utiliser Chrome de la manière la plus simple pour moi, c’est d’installer Python 3, puis à partir de la commande Invite, exécutez la commande python -m http.server puis accédez à http: // localhost: 8000/ , puis accédez à vos fichiers

python -m http.server
3
Rida

Je recevais cette erreur exacte lors du chargement d'un fichier HTML sur le navigateur qui utilisait un fichier json à partir du répertoire local. Dans mon cas, j'ai pu résoudre ce problème en créant un serveur de nœud simple permettant de serveur le contenu statique. J'ai laissé le code pour ceci à ceci autre réponse .

2
thehme

Je vous suggère d'utiliser un mini-serveur pour exécuter ce type d'applications sur localhost (si vous n'utilisez pas un serveur intégré).

En voici un qui est très simple à configurer et à exécuter:

https://www.npmjs.com/package/tiny-server
2
Deniss M.

Il dit simplement que l'application doit être exécutée sur un serveur Web. J'ai eu le même problème avec Chrome, j'ai démarré Tomcat et déplacé mon application là-bas, et cela a fonctionné.

1
Enayat Rajabi

Je soupçonne que cela est déjà mentionné dans certaines réponses, mais je le modifierai légèrement pour avoir une réponse complète (plus facile à trouver et à utiliser).

  1. Allez à: https://nodejs.org/en/download/ . Installez nodejs.

  2. Installez le serveur http en exécutant la commande de la commande Invite npm install -g http-server.

  3. Accédez au répertoire de travail dans lequel réside index.html/yoursome.html.

  4. Démarrez votre serveur http en exécutant la commande http-server -c-1

Ouvrez le navigateur Web avec http://localhost:8080 Ou http://localhost:8080/yoursome.html - en fonction de votre nom de fichier html.

1
TarmoPikaro

J'ai également été capable de recréer ce message d'erreur lors de l'utilisation d'une balise d'ancrage avec le href suivant: 

<a href="javascript:">Example a tag</a>

Dans mon cas, une balise était utilisée pour obtenir le "curseur de pointeur" et l'événement était en fait contrôlé par un événement jQuery on click. J'ai supprimé le href et ajouté une classe qui s'applique:

cursor:pointer;

0
mgilberties

MacOS..., configurez un simple LaunchAgent pour activer ces fonctionnalités glamour dans votre propre copie de Chrome ...

Enregistrez une plist, nommée any (launch.chrome.dev.mode.plist, par exemple) dans ~/Library/LaunchAgents avec un contenu similaire à ...

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.Apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>Label</key>
    <string>launch.chrome.dev.mode</string>
    <key>ProgramArguments</key>
    <array>
        <string>/Applications/Google Chrome.app/Contents/MacOS/Google Chrome</string>
        <string>-allow-file-access-from-files</string>
    </array>
    <key>RunAtLoad</key>
    <true/>
</dict>
</plist>

Il devrait lancer au démarrage .. mais vous pouvez le forcer à le faire à tout moment avec la commande terminal

launchctl load -w ~/Library/LaunchAgents/launch.chrome.dev.mode.plist

TADA! ???? ???????? ???? ????????

0
Alex Gray

Impossible de charger des fichiers locaux statiques (par exemple: svg) sans serveur. Si NPM/YARN est installé sur votre ordinateur, vous pouvez configurer un serveur http simple à l’aide de " serveur http " 

npm install http-server -g
http-server [path] [options]

Ou ouvrez un terminal dans ce dossier de projet et tapez "hs". Il démarrera automatiquement le serveur HTTP Live.

0
sujithklr93

heu Je viens de trouver des mots officiels: "Les tentatives de chargement de modules AMD distants non construits utilisant le plug-in dojo/text échoueront en raison de restrictions de sécurité croisées. le système de compilation.) " https://dojotoolkit.org/documentation/tutorials/1.10/cdn/

0
YUIOP QWERT
  • Installez le serveur Web local pour Java, par exemple Tomcat, pour PHP, vous pouvez utiliser la lampe, etc.
  • Déposez le fichier json dans le répertoire du serveur d'applications accessible au public

  •  List item

  • Démarrez le serveur d'applications et vous devriez pouvoir accéder au fichier à partir de localhost.

0
Fred Ondieki

Une façon dont cela a fonctionné de charger des fichiers locaux est de les utiliser dans le dossier du projet plutôt qu’en dehors de votre dossier de projet. Créez un dossier sous les exemples de fichiers de votre projet de la même manière que nous avons créé pour les images et remplacez la section qui utilise un chemin local complet autre que le chemin du projet et utilisez une URL relative du fichier sous le dossier du projet . Cela a fonctionné pour moi. 

0
Naga Sai A