"Ursprungsübergreifende Anforderungen werden nur für HTTP unterstützt." Fehler beim Laden einer lokalen Datei

Ich versuche, ein 3D-Modell mit in Three.js zu laden JSONLoader, und dieses 3D-Modell befindet sich im selben Verzeichnis wie die gesamte Website.

Ich erhalte den "Cross origin requests are only supported for HTTP."Fehler, weiß aber nicht, was ihn verursacht und wie ich ihn beheben kann.

Meine Kristallkugel sagt, dass Sie das Modell mit entweder file://oder laden C:/, was der Fehlermeldung treu bleibt, da dies nicht der Fall isthttp://

Sie können also entweder einen Webserver auf Ihrem lokalen PC installieren oder das Modell an eine andere Stelle hochladen jsonpund die URL verwenden und in ändernhttp://example.com/path/to/model

Origin ist in RFC-6454 als definiert

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

Obwohl Ihre Datei vom selben Host stammt ( localhost), aber solange das Schema unterschiedlich ist ( http/ file), werden sie als unterschiedlicher Ursprung behandelt.

Nur um explizit zu sein - Ja, der Fehler besagt, dass Sie Ihren Browser nicht direkt darauf richten können file://some/path/some.html

Hier sind einige Optionen, mit denen Sie schnell einen lokalen Webserver starten können, damit Ihr Browser lokale Dateien rendern kann

Python 2

Wenn Sie Python installiert haben ...

1. Wechseln Sie some.htmlmit dem Befehl in den Ordner, in dem Ihre Datei oder Datei (en) vorhanden sindcd /path/to/your/folder

2. Starten Sie einen Python-Webserver mit dem Befehl python -m SimpleHTTPServer

Dadurch wird ein Webserver gestartet, auf dem Ihre gesamte Verzeichnisliste gehostet wird http://localhost:8000

3. Sie können einen benutzerdefinierten Port verwenden python -m SimpleHTTPServer 9000, über den Sie einen Link erhalten:http://localhost:9000

Dieser Ansatz ist in jede Python-Installation integriert.

Python 3

Führen Sie die gleichen Schritte aus, verwenden Sie jedoch stattdessen den folgenden Befehl python3 -m http.server

Node.js

Alternativ, wenn Sie ein reaktionsschnelleres Setup benötigen und bereits nodejs verwenden ...

1. Installieren Sie http-serverdurch Eingabenpm install -g http-server

2. Wechseln Sie in Ihr Arbeitsverzeichnis, in dem Sie some.htmlleben

3. Starten Sie Ihren http-Server durch Ausgabe http-server -c-1

Dadurch wird eine Node.js-httpd gestartet, die die Dateien in Ihrem Verzeichnis als statische Dateien bereitstellt, auf die über sie zugegriffen werden kann http://localhost:8080

Rubin

Wenn Ihre bevorzugte Sprache Ruby ist ... sagen die Ruby-Götter, dass dies auch funktioniert:

ruby -run -e httpd . -p 8080

PHP

Natürlich hat PHP auch seine Lösung.

php -S localhost:8000

In Chrome können Sie dieses Flag verwenden:

--allow-file-access-from-files

Lesen Sie hier mehr.

Bin heute dazu gekommen.

Ich habe einen Code geschrieben, der so aussah:

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

... aber es hätte so aussehen sollen:

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

Der einzige Unterschied war das Fehlen des http://zweiten Codeausschnitts.

Ich wollte das nur veröffentlichen, falls es andere mit einem ähnlichen Problem gibt.

Ändern Sie einfach die URL in http://localhoststatt localhost. Wenn Sie die HTML-Datei von lokal öffnen, sollten Sie einen lokalen Server erstellen, um diese HTML-Datei bereitzustellen. Der einfachste Weg ist die Verwendung Web Server for Chrome. Das wird das Problem beheben.

In einer Android-App - zum Beispiel, um JavaScript den Zugriff auf Assets über zu ermöglichen file:///android_asset/- verwenden Sie setAllowFileAccessFromFileURLs(true)die WebSettings, die Sie durch Aufrufen getSettings()der erhalten WebView.

Verwenden Sie http://oder https://, um eine URL zu erstellen

Fehler :localhost:8080

Lösung :http://localhost:8080

Der schnellste Weg für mich war: Für Windows-Benutzer, die Ihre Datei unter Firefox ausführen, ist das Problem gelöst. Wenn Sie Chrome verwenden möchten, war es für mich am einfachsten, Python 3 zu installieren und dann über die Eingabeaufforderung den Befehl auszuführen. python -m http.server Gehen Sie dann zu http: // localhost: 8000 / Navigieren Sie dann zu Ihren Dateien

python -m http.server

Ich werde 3 verschiedene Ansätze auflisten, um dieses Problem zu lösen:

1. Verwenden eines sehr leichten npmPakets : Installieren Sie den Live-Server mit npm install -g live-server. Gehen Sie dann in dieses Verzeichnis, öffnen Sie das Terminal live-serverund geben Sie die Eingabetaste ein. Die Seite wird unter bedient localhost:8080. BONUS: Standardmäßig wird auch das Hot-Reloading unterstützt.
2. Verwenden einer von Google entwickelten leichten Google Chrome- App : Installieren Sie die App, wechseln Sie in Chrome zur Registerkarte "Apps" und öffnen Sie die App. Zeigen Sie in der App auf den richtigen Ordner. Ihre Seite wird zugestellt!
3. Ändern der Chrome-Verknüpfung in Windows : Erstellen Sie die Verknüpfung eines Chrome-Browsers. Klicken Sie mit der rechten Maustaste auf das Symbol und öffnen Sie die Eigenschaften. In Eigenschaften bearbeiten targetzu "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession"und speichert. Öffnen Sie dann mit Chrome die Seite mit ctrl+o. HINWEIS: Verwenden Sie diese Verknüpfung NICHT zum regulären Surfen.

Für Windows-Benutzer ohne Python oder Node.js gibt es immer noch eine einfache Lösung: Mongoose .

Alles, was Sie tun, ist, die ausführbare Datei an die Stelle zu ziehen, an der sich das Stammverzeichnis des Servers befinden soll, und sie auszuführen. In der Taskleiste wird ein Symbol angezeigt, das im Standardbrowser zum Server navigiert.

Außerdem ist Z-WAMP eine 100% tragbare WAMP, die in einem einzigen Ordner ausgeführt wird. Es ist fantastisch. Dies ist eine Option, wenn Sie einen schnellen PHP- und MySQL-Server benötigen.

Wenn Sie Mozilla Firefox verwenden, funktioniert es wie erwartet ohne Probleme.

PS Überraschenderweise funktioniert IntenetExplorer_Edge absolut einwandfrei !!!

Einfache Lösung für wen mit VS Code

Ich habe diesen Fehler für eine Weile bekommen. Die meisten Antworten funktionieren. Aber ich habe eine andere Lösung gefunden. Wenn Sie sich hier nicht mit node.jseiner anderen Lösung befassen möchten und mit einer HTML-Datei arbeiten (Funktionen aus einer anderen JS-Datei aufrufen oder JSON-APIs abrufen), versuchen Sie, die Live Server- Erweiterung zu verwenden.

Sie können damit problemlos einen Live-Server öffnen. Und weil es localhostServer erstellt , ist das Problem behoben. Sie können das einfach starten, localhostindem Sie eine HTML-Datei öffnen und mit der rechten Maustaste auf den Editor klicken und auf klicken Open with Live Server.

Grundsätzlich werden die Dateien mit http://localhost/index.htmlanstatt mit geladen file://....

BEARBEITEN

Es ist nicht erforderlich, eine .htmlDatei zu haben . Sie können den Live Server mit Verknüpfungen starten.

Drücken Sie, (alt+L, alt+O)um den Server zu öffnen und den Server (alt+L, alt+C)zu stoppen. [Auf MAC cmd+L, cmd+Ound cmd+L, cmd+C]

Hoffe es wird jemandem helfen :)

Ich habe genau diesen Fehler beim Laden einer HTML-Datei in den Browser erhalten, der eine JSON-Datei aus dem lokalen Verzeichnis verwendet. In meinem Fall konnte ich dieses Problem lösen, indem ich einen einfachen Knotenserver erstellte, der statische Inhalte bedienen konnte. Ich habe den Code dafür bei dieser anderen Antwort belassen .

Ich schlage vor, dass Sie einen Mini-Server verwenden, um diese Art von Anwendungen auf localhost auszuführen (wenn Sie keinen eingebauten Server verwenden).

Hier ist eine, die sehr einfach einzurichten und auszuführen ist:

https://www.npmjs.com/package/tiny-server

Ich vermute, dass es bereits in einigen Antworten erwähnt wurde, aber ich werde dies leicht ändern, um eine vollständige funktionierende Antwort zu erhalten (einfacher zu finden und zu verwenden).

1. Gehen Sie zu: https://nodejs.org/en/download/ . Installieren Sie nodejs.

2. Installieren Sie den http-Server, indem Sie den Befehl an der Eingabeaufforderung ausführen npm install -g http-server.

3. Wechseln Sie in Ihr Arbeitsverzeichnis, in dem sich index.html/ yoursome.htmlbefindet.

4. Starten Sie Ihren http-Server, indem Sie den Befehl ausführen http-server -c-1

Öffnen Sie den Webbrowser für http://localhost:8080 oder http://localhost:8080/yoursome.html - abhängig von Ihrem HTML-Dateinamen.

Es heißt einfach, dass die Anwendung auf einem Webserver ausgeführt werden soll. Ich hatte das gleiche Problem mit Chrome, ich habe Tomcat gestartet und meine Anwendung dorthin verschoben, und es hat funktioniert.

äh. Ich habe gerade einige offizielle Wörter gefunden: "Der Versuch, nicht erstellte Remote-AMD-Module zu laden, die das Dojo / Text-Plugin verwenden, schlägt aufgrund von Sicherheitsbeschränkungen zwischen verschiedenen Ursprüngen fehl. (Erstellte Versionen von AMD-Modulen bleiben davon unberührt, da die Aufrufe von Dojo / Text durch eliminiert werden." das Build-System.) " https://dojotoolkit.org/documentation/tutorials/1.10/cdn/

Eine Möglichkeit, lokale Dateien zu laden, besteht darin, sie im Projektordner anstatt außerhalb Ihres Projektordners zu verwenden. Erstellen Sie einen Ordner unter Ihren Projektbeispieldateien, ähnlich wie wir ihn für Bilder erstellen, und ersetzen Sie den Abschnitt, in dem der vollständige lokale Pfad außer dem Projektpfad verwendet wird, und verwenden Sie die relative URL der Datei im Projektordner. Es hat bei mir funktioniert

Für alle, die MacOS... einen einfachen LaunchAgent einrichten , um diese glamourösen Funktionen in Ihrer eigenen Kopie von Chrome zu aktivieren ...

Speichern Sie ein plist, wie auch immer genanntes ( launch.chrome.dev.mode.plistzum Beispiel) ~/Library/LaunchAgentsmit ähnlichem Inhalt wie ...

<?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>

Es sollte beim Start gestartet werden. Sie können dies jedoch jederzeit mit dem Befehl terminal erzwingen

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

TADA! 😎 💁🏻 🙊 🙏🏾

• Installieren Sie einen lokalen Webserver für Java, z. B. Tomcat. Für PHP können Sie eine Lampe usw. Verwenden
• Legen Sie die JSON-Datei im öffentlich zugänglichen App Server-Verzeichnis ab

• 

• Starten Sie den App-Server, und Sie sollten über localhost auf die Datei zugreifen können

Ohne Server können keine statischen lokalen Dateien (z. B. svg) geladen werden. Wenn Sie NPM / YARN auf Ihrem Computer installiert haben, können Sie einen einfachen http-Server mit " http-server " einrichten.

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

Oder öffnen Sie das Terminal in diesem Projektordner und geben Sie "hs" ein. Der HTTP-Live-Server wird automatisch gestartet.

Viele Probleme hierfür, bei meinem Problem fehlt '/' Beispiel: jquery-1.10.2.js: 8720 XMLHttpRequest kann http: // localhost: xxxProduct / getList_tagLabels / nicht laden. Es muss sein: http: // localhost: xxx / Product / getList_tagLabels /

Ich hoffe diese Hilfe für diejenigen, die dieses Problem lösen.

Ich konnte diese Fehlermeldung auch neu erstellen, wenn ich ein Ankertag mit der folgenden href verwendete:

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

In meinem Fall wurde ein Tag verwendet, um den 'Zeigercursor' abzurufen, und das Ereignis wurde tatsächlich von einem jQuery-on-Click-Ereignis gesteuert. Ich habe die href entfernt und eine Klasse hinzugefügt, die gilt:

cursor:pointer;

Für Linux Python-Benutzer:

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

Wenn Sie darauf bestehen, die .htmlDatei lokal auszuführen und nicht mit einem Webserver bereitzustellen, können Sie verhindern, dass diese Cross-Origin-Anforderungen überhaupt auftreten, indem Sie die problematischen Ressourcen inline verfügbar machen.

Ich hatte dieses Problem beim Versuch, .jsDateien bereitzustellen file://. Meine Lösung bestand darin, mein Build-Skript zu aktualisieren, um <script src="...">Tags durch zu ersetzen <script>...</script>. Hier ist ein gulpAnsatz dafür:

1. Führen Sie npm install --save-devPakete aus gulp, gulp-inlineund del.

2. Fügen Sie gulpfile.jsnach dem Erstellen eines Verzeichnisses im Stammverzeichnis den folgenden Code hinzu (ändern Sie einfach die Dateipfade für das, was zu Ihnen passt):

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. Führen Sie gulp bundle-for-localIhr Build-Skript aus oder aktualisieren Sie es, um es automatisch auszuführen.

Das detaillierte Problem und die Lösung für meinen Fall finden Sie hier .

Cordova erreichen dies. Ich kann immer noch nicht herausfinden, wie Cordova es gemacht hat. Es geht nicht einmal durch shouldInterceptRequest.

Später fand ich heraus, dass der Schlüssel zum Laden einer Datei aus der lokalen Datei lautet: myWebView.getSettings (). SetAllowUniversalAccessFromFileURLs (true);

Wenn Sie auf eine http-Ressource zugreifen möchten, überprüft die Webansicht die OPTIONS-Methode, mit der Sie den Zugriff über WebViewClient.shouldInterceptRequest gewähren können, indem Sie eine Antwort zurückgeben. Für die folgende GET / POST-Methode können Sie einfach null zurückgeben.

Schließen Sie zuerst alle Chrominstanzen.

danach folgen Sie diesem.

Ich habe diesen Befehl auf dem Mac verwendet.

"/ Applications / Google Chrome.app/Contents/MacOS/Google Chrome" - Erlaubt den Dateizugriff aus Dateien

Für Windows:

Wie starte ich HTML mit Chrome im Modus "--allow-file-access-from-files"?

Ich habe dies erlebt, als ich eine Seite für die Offline-Ansicht heruntergeladen habe.

Ich musste nur die entfernen integrity="*****" und crossorigin="anonymous"Attribute von allen <link>und <script>Tags