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

796

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 l'ensemble du site Web.

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

corazza
la source
23
Essayez-vous de le faire localement?
WojtekT
11
Vous devez utiliser localhost, même si son fichier local
Neil
22
Mais cela ne traverse pas le domaine!
corazza
21
Si vous utilisez Chrome, le démarrer à partir du terminal avec l'option --allow-file-access-from-files pourrait vous aider.
nickiaconis
12
Ouais, ce n'est pas vraiment inter-domaines quand le fichier est dans le même dossier que la page web, c'est maintenant ... J'ai trouvé que si vous utilisez Firefox au lieu de Chrome, le problème disparaît.
Sphinxxx

Réponses:

790

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

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

L'origine est définie dans la RFC-6454 comme

   ...they have the same
   scheme, host, and port.  (See Section 4 for full details.)

Ainsi, même si votre fichier provient du même hôte ( localhost), mais tant que le schéma est différent ( http/ file), ils sont traités comme une origine différente.

Andreas Wong
la source
7
Ouais, j'essaye de faire ça en utilisant file://, mais je ne comprends pas pourquoi c'est permis. Eh bien, j'installe Lampp, je suppose ...
corazza
150
Imaginez si cela est autorisé et une application Web par laquelle l'auteur de la page utilise quelque chose comme load('file://C:/users/user/supersecret.doc'), puis téléchargez le contenu sur leur serveur en utilisant ajax etc.
Andreas Wong
11
malheureusement, la politique est faite pour tous les cas, pas seulement pour le vôtre :(, donc tu dois le supporter
Andreas Wong
28
Il y a une page pour ce sujet dans le wiki GitHub: github.com/mrdoob/three.js/wiki/How-to-run-things-locally
Felipe Lima
29
Vous pouvez également utiliser le commutateur --allow-file-access-from-files dans Chrome. Par ma réponse ici: stackoverflow.com/questions/8449716/…
prauchfuss
609

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

Voici quelques options pour faire tourner rapidement un serveur Web local pour permettre à votre navigateur de rendre des fichiers locaux

Python 2

Si vous avez installé Python ...

  1. Changez le répertoire dans le dossier où votre fichier some.htmlou vos fichiers existent à l'aide de la commandecd /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 l'intégralité de votre liste d'annuaire sur http://localhost:8000

  1. Vous pouvez utiliser un port personnalisé python -m SimpleHTTPServer 9000vous 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

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

  1. Installer http-serveren tapantnpm install -g http-server

  2. Changez dans votre répertoire de travail, où votre some.htmlvie

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

Cela fait tourner un httpd Node.js qui sert les fichiers de votre répertoire en tant que 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 également sa solution.

php -S localhost:8000
Scott Stensland
la source
3
Cela m'a fait gagner une tonne de temps grâce. Mon installation Python n'avait pas le module SimpleHTTPServer mais les instructions du nœud fonctionnaient comme un charme.
LukeP
3
En réponse au commentaire de LukeP, en python 2.7, la commande fonctionne selon les instructions $ python -m SimpleHTTPServer, ce qui produit le message: Serving HTTP on 0.0.0.0 port 8000 ...Si vous épelez le nom du module incorrectement, par exemple, $ python -m SimpleHttpServervous obtiendrez le message d'erreur No module named SimpleHttpServerVous obtiendrez un message d'erreur similaire si vous avez python3 installé (v. python 2.7). Vous pouvez vérifier votre version de Python en utilisant la commande: $ python --version. Vous pouvez également spécifier le port d'écoute comme ceci:$ python -m SimpleHTTPServer 3333
7stud
1
Le serveur python sert des fichiers à partir du répertoire où vous démarrez le serveur. Donc, si les fichiers que vous souhaitez servir se trouvent dans / Users / 7stud / angular_projects / 1app, démarrez le serveur dans ce répertoire, par exemple $ cd ~/angular_projects/1app, alors $ python -m SimpleHTTPServer. Dans votre navigateur, entrez l'URL http://localhost:8000/index.html. Vous pouvez également demander des fichiers dans les sous-répertoires du répertoire où vous avez démarré le serveur, par exemplehttp://localhost:8000/subdir/hello.html
7stud
2
J'ai entendu dire que Python est simple et puissant, tout comme le langage "X", mais c'est ridicule! Pas besoin d'installer XAMPP, ou de configurer un simple serveur http js avec nœud pour servir des fichiers statiques - Une commande et un boom! Merci beaucoup, économise beaucoup de temps et de tracas.
RD
2
IMPRESSIONNANT! - pour Python sous Windows, utilisez: python -m http.server 8080 ... ou quel que soit le port que vous voulez et quand vous voulez le quitter, ctrl-c.
Kristopher
162

Dans Chrome, vous pouvez utiliser ce drapeau:

--allow-file-access-from-files

En savoir plus ici.

Communauté
la source
11
@ Blairg23, gardez à l'esprit que cette solution nécessite de redémarrer toutes les instances de Chrome.exe pour que cela fonctionne
Alex Klaus
4
Veuillez expliquer comment l'utiliser en chrome.
Rishabh Agrahari
@Priya ne devrait pas faire cela cependant
Suraj Jain
Je suggérerais d'utiliser Chromium uniquement pour le débogage local (en commençant par un indicateur --allow-file-access-from-files). Cela signifie utiliser Chrome pour la navigation Web courante et utiliser Chromium comme application par défaut pour les fichiers HTML.
Alan Zhiliang Feng
Notez que fetch()cela nie quand même. Vous devez utiliser XMLHttpRequestd'une certaine manière
Hashbrown
63

Courez-y 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 l'absence de http://dans le deuxième extrait de code.

Je voulais juste mettre cela là-bas au cas où d'autres personnes auraient un problème similaire.

James Harrington
la source
41

Remplacez simplement l'URL par au http://localhostlieu de localhost. Si vous ouvrez le fichier html depuis local, vous devez créer un serveur local pour servir ce fichier ht, la manière la plus simple est d'utiliser Web Server for Chrome. Cela résoudra le problème.

Finlandais
la source
5
+1 pour le Web Server for Chromelien de l'application - c'est de loin la solution la plus simple et la plus propre pour la configuration temporaire de httpd pour Chrome IMO
Cela m'a sauvé. La solution exacte
Surya
18

Dans une application Android - par exemple, pour permettre à JavaScript d'avoir accès aux actifs via file:///android_asset/- utilisez setAllowFileAccessFromFileURLs(true)le WebSettingsque vous obtenez en appelant getSettings()le WebView.

CommonsWare
la source
Brillant! Nous étions sur le point de réécrire des méthodes pour injecter du JSON dans des variables .. mais cela fonctionne! webView.getSettings (). setAllowFileAccessFromFileURLs (true);
WallyHale
15

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

erreur :localhost:8080

solution :http://localhost:8080

KARTHIKEYAN.A
la source
14

le moyen le plus rapide pour moi était: pour les utilisateurs de Windows, exécutez votre fichier sur Firefox, le problème est résolu, ou si vous voulez utiliser le moyen le plus simple pour moi, installer Python 3, puis à partir de l'invite de commande, exécuter la commande, python -m http.server puis accédez à http: // localhost: 8000 / puis accédez à vos fichiers

python -m http.server
Ridha Rezzag
la source
13

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

  1. Utilisation d'un npmpackage 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-serveret appuyez sur Entrée, la page sera servie à localhost:8080. BONUS: Il prend également en charge le rechargement à chaud par défaut.
  2. À l'aide d'une application Google Chrome légère développée par Google : installez ensuite l'application, accédez à l'onglet applications dans Chrome et ouvrez l'application. Dans l'application, pointez-le vers le bon dossier. Votre page sera servie!
  3. Modification du raccourci Chrome dans Windows : créez un raccourci de navigateur Chrome. Faites un clic droit sur l'icône et ouvrez les propriétés. Dans les propriétés, modifier 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. REMARQUE: N'utilisez PAS ce raccourci pour une navigation régulière.
Blackeard
la source
12

Pour ceux sous 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îtra dans la barre des tâches et elle accédera 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 PHP et MySQL rapide.

bryc
la source
Si vous installez php ou vous l'avez installé, vous pouvez démarrer un serveur dans votre dossier: php.net/manual/es/features.commandline.webserver.php
jechaviz
12

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

PS Étonnamment, IntenetExplorer_Edge fonctionne parfaitement bien !!!

Yash P Shah
la source
1
Plus maintenant. firefox et ie bloquent tous les deux la demande pour moi.
Baahubali
ce n'est pas non plus une bonne chose d'accéder aux pages non sécurisées: D
csomakk
6

Solution simple pour qui utilise VS Code

Je reçois cette erreur depuis un moment. La plupart des réponses fonctionnent. Mais j'ai trouvé une solution différente. Si vous ne voulez pas traiter node.jsou toute autre solution ici et que vous travaillez avec un fichier HTML (appelant des fonctions à partir d'un autre fichier js ou récupérant des api json), essayez d'utiliser l' extension Live Server .

Il vous permet d'ouvrir facilement un serveur en direct. Et à cause de cela crée un localhostserveur, le problème se résout. Vous pouvez simplement démarrer le localhosten ouvrant un fichier HTML et faites un clic droit sur l'éditeur et cliquez sur Open with Live Server.

Il charge essentiellement les fichiers en utilisant http://localhost/index.htmlau lieu d'utiliser file://....

ÉDITER

Il n'est pas nécessaire d'avoir un .htmlfichier. Vous pouvez démarrer Live Server avec des raccourcis.

Appuyez sur (alt+L, alt+O)pour ouvrir le serveur et (alt+L, alt+C)pour arrêter le serveur. [Sur MAC, cmd+L, cmd+Oet cmd+L, cmd+C]

J'espère que cela aidera quelqu'un :)

Ömürcan Cengiz
la source
4

J'obtenais 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 simple serveur de nœuds qui permettait de gérer du contenu statique. J'ai laissé le code pour cela à cette autre réponse .

thehme
la source
4

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

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

https://www.npmjs.com/package/tiny-server
Deniss M.
la source
4

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

  1. Accédez à: https://nodejs.org/en/download/ . Installez nodejs.

  2. Installez le serveur http en exécutant la commande à partir de l'invite de commande npm install -g http-server.

  3. Accédez à votre répertoire de travail, où index.html/ yoursome.htmlréside.

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

Ouvrez le navigateur Web vers http://localhost:8080 ou http://localhost:8080/yoursome.html - selon votre nom de fichier html.

TarmoPikaro
la source
3

Il indique 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é.

Enayat
la source
1

euh. Je viens de trouver des mots officiels "Tenter de charger des modules AMD distants non construits qui utilisent le plugin dojo / text échouera en raison de restrictions de sécurité d'origine croisée. (Les versions construites des modules AMD ne sont pas affectées car les appels à dojo / text sont éliminés par le système de construction.) " https://dojotoolkit.org/documentation/tutorials/1.10/cdn/

YUIOP QWERT
la source
1

Une façon dont cela a fonctionné en chargeant des fichiers locaux est de les utiliser avec dans le dossier du projet au lieu de l'extérieur de votre dossier de projet. Créez un dossier sous vos fichiers d'exemple de projet similaire à la façon dont nous créons pour les images et remplacez la section où vous utilisez un chemin local complet autre que le chemin du projet et utilisez l'url relative du fichier sous le dossier du projet. Ça a marché pour moi

Naga Sai A
la source
1

Pour tout le monde MacOS... configurez un LaunchAgent simple pour activer ces fonctionnalités glamour dans votre propre copie de Chrome ...

Enregistrez un plist, nommé n'importe quoi ( launch.chrome.dev.mode.plist, par exemple) ~/Library/LaunchAgentsavec 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 se 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! 😎 💁🏻 🙊 🙏🏾

Alex Gray
la source
1
  • Installez un serveur Web local pour Java, par exemple Tomcat, pour PHP, vous pouvez utiliser une lampe, etc.
  • Déposez le fichier json dans le répertoire du serveur d'applications accessible au public
  • Élément de liste

  • Démarrez le serveur d'applications et vous devriez pouvoir accéder au fichier depuis localhost

Fred Ondieki
la source
1

Impossible de charger des fichiers locaux statiques (par exemple: svg) sans serveur. Si NPM / YARN est installé sur votre machine, vous pouvez configurer un serveur http simple en utilisant " http-server "

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

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

Sujith S
la source
réponse en double
Scott Stensland
0

J'ai également pu 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 du 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;

mgilberties
la source
0

Pour les utilisateurs de Linux Python:

import webbrowser
browser = webbrowser.get('google-chrome --allow-file-access-from-files %s')
browser.open(url)
Daniel Braun
la source
N'y a-t-il aucune raison de google-chrome --allow-file-access-from-files <url>ne pas travailler et d'être plus concis?
agupta231
@ agupta231 Le module webbrowser a des arguments qui vous permettent différents types "d'ouverture" par exemple. ouvrir dans l'onglet actuel, nouvel onglet, nouvelle fenêtre etc.
Daniel Braun
0

Si vous insistez pour exécuter le .htmlfichier localement et ne pas le servir avec un serveur Web, vous pouvez empêcher ces demandes d'origine croisée de se produire en premier en rendant les ressources problématiques disponibles en ligne.

J'ai eu ce problème en essayant de servir des .jsfichiers file://. Ma solution était de mettre à jour mon script de construction pour remplacer les <script src="...">balises par <script>...</script>. Voici une gulpapproche pour ce faire:

1. exécuter npm install --save-devdes packages gulp, gulp-inlineetdel .

2. Après avoir créé un gulpfile.jsdans le répertoire racine, ajoutez le code suivant (changez simplement les chemins de fichier pour ce qui vous convient):

let gulp = require('gulp');
let inline = require('gulp-inline');
let del = require('del');

gulp.task('inline', function (done) {
    gulp.src('dist/index.html')
    .pipe(inline({
        base: 'dist/',
        disabledTypes: 'css, svg, img'
    }))
    .pipe(gulp.dest('dist/').on('finish', function(){
        done()
    }));
});

gulp.task('clean', function (done) {
    del(['dist/*.js'])
    done()
});

gulp.task('bundle-for-local', gulp.series('inline', 'clean'))
  1. Exécutez gulp bundle-for-localou mettez à jour votre script de génération pour l'exécuter automatiquement.

Vous pouvez voir le problème détaillé et la solution de mon cas ici .

noamyg
la source
-1

Cordova y parvient. Je n'arrive toujours pas à comprendre comment Cordova a fait. Il ne passe même pas par shouldInterceptRequest.

Plus tard, j'ai découvert que la clé pour charger n'importe quel fichier à partir du local est: myWebView.getSettings (). SetAllowUniversalAccessFromFileURLs (true);

Et lorsque vous souhaitez accéder à n'importe quelle ressource http, la vue Web vérifie avec la méthode OPTIONS, que vous pouvez accorder l'accès via WebViewClient.shouldInterceptRequest en renvoyant une réponse, et pour la méthode GET / POST suivante, vous pouvez simplement renvoyer null.

user1462586
la source
-1

J'ai vécu cela lorsque j'ai téléchargé une page pour une vue hors ligne.

Je viens de supprimer les attributs integrity="*****"et crossorigin="anonymous"de tous les tags <link>et<script>

aphoe
la source