Question "Les demandes d'origine croisées sont uniquement prises en charge 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 est dans le même répertoire que l'ensemble du site Web.

Je reçois le "Cross origin requests are only supported for HTTP." erreur, mais je ne sais pas ce qui le cause ni comment le réparer.


614
2018-05-25 09:41


origine


Réponses:


Ma boule de cristal dit que vous chargez le modèle en utilisant soit 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 changez l'URL pour http://example.com/path/to/model


648
2018-05-25 09:42



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

Voici quelques options pour lancer rapidement un serveur Web local pour permettre à votre navigateur de rendre les fichiers locaux

Python 2

Si vous avez installé Python ...

  1. Changer le répertoire dans le dossier où votre fichier some.html ou des fichiers existent en utilisant la commande cd /path/to/your/folder

  2. Démarrer un serveur web Python en utilisant la commande python -m SimpleHTTPServer

Cela va démarrer un serveur Web pour héberger l'ensemble de votre liste de répertoires à http://localhost:8000

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

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

Python 3

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

Node.js

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

  1. Installer http-server en tappant npm install -g http-server

  2. Changez dans votre répertoire de travail, où votresome.html vies

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

Cela crée un fichier httpd Node.js qui sert les fichiers de votre répertoire en tant que fichiers statiques accessibles depuis http://localhost:8080

Rubis

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

ruby -run -e httpd . -p 8080

PHP

Bien sûr, PHP a aussi sa solution.

php -S localhost:8000

484
2018-02-06 16:36



Dans Chrome, vous pouvez utiliser ce drapeau:

--allow-file-access-from-files

Lire la suite ici.


141
2018-05-20 11:36



Ran dedans à ceci 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 ça 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 mettre là-bas au cas où il y en a d'autres avec un problème similaire.


50
2018-02-20 16:27



Changez simplement l'URL pour 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, le moyen le plus simple est d'utiliser Web Server for Chrome. Cela va régler le problème.


25
2017-12-16 03:01



Pour ceux sur Windows sans Python ou Node.js, il y a toujours une solution légère: Mangouste.

Tout ce que vous faites est de faire glisser l'exécutable à l'endroit où la racine du serveur devrait être, et exécutez-le. Une icône apparaîtra dans la barre des tâches et il naviguera vers le serveur dans le navigateur par défaut.

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


10
2018-03-04 05:24



Dans une application Android, par exemple, pour permettre à JavaScript d'accéder aux ressources via file:///android_asset/ - utilisation setAllowFileAccessFromFileURLs(true)sur le WebSettings que vous obtenez d'appeler getSettings()sur le WebView.


10
2017-12-29 22:15



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

  1. En utilisant un très léger npm paquet: Installer live-server en utilisant 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. En utilisant un léger Google Chrome application développé par Google: Installez l'application puis, accédez à l'onglet des applications dans Chrome et ouvrez l'application. Dans l'application, pointez vers le bon dossier. Votre page sera servie!
  3. Modification du raccourci Chrome dans Windows: Créez le raccourci d'un navigateur Chrome. Cliquez avec le bouton droit sur l'icône et ouvrez les propriétés. Dans les propriétés, modifiez target à "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession" Et enregistrer. Ensuite, en utilisant Chrome, ouvrez la page en utilisant ctrl+o. NOTE: Faites NE PAS Utilisez ce raccourci pour naviguer régulièrement.

6
2017-11-29 06:54



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

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


4
2018-04-02 17:00