"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 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.

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.

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

3. 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

Dans Chrome, vous pouvez utiliser ce drapeau:

--allow-file-access-from-files

En savoir plus ici.

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.

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.

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.

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

erreur :localhost:8080

solution :http://localhost:8080

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

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.

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.

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

PS Étonnamment, IntenetExplorer_Edge fonctionne parfaitement bien !!!

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 :)

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 .

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

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.

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

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/

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

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! 😎 💁🏻 🙊 🙏🏾

• 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

• 

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

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.

Beaucoup de problème pour cela, avec mon problème est manquant '/' exemple: jquery-1.10.2.js: 8720 XMLHttpRequest ne peut pas charger http: // localhost: xxxProduct / getList_tagLabels / Il doit être: http: // localhost: xxx / Product / getList_tagLabels /

J'espère que cette aide pour qui rencontre ce problème.

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;

Pour les utilisateurs de Linux Python:

import webbrowser
browser = webbrowser.get('google-chrome --allow-file-access-from-files %s')
browser.open(url)

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'))

3. 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 .

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.

fermez d'abord toutes les instances de chrome.

après cela, suivez ceci.

J'ai utilisé cette commande sur mac.

"/ Applications / Google Chrome.app/Contents/MacOS/Google Chrome" - autorisez l'accès aux fichiers à partir des fichiers

Pour les fenêtres:

Comment lancer html en utilisant Chrome en mode "--allow-file-access-from-files"?

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>