„Żądania dotyczące różnych źródeł są obsługiwane tylko dla HTTP”. błąd podczas ładowania pliku lokalnego

796

Próbuję załadować model 3D do Three.js JSONLoader, a ten model 3D znajduje się w tym samym katalogu co cała strona internetowa.

Pojawia się "Cross origin requests are only supported for HTTP."błąd, ale nie wiem, co go powoduje, ani jak go naprawić.

corazza
źródło
23
Próbujesz to zrobić lokalnie?
WojtekT,
10
Musisz użyć localhost, nawet jeśli jest to plik lokalny
Neil
22
Ale to nie cross-domain!
corazza
21
Jeśli używasz Chrome, uruchomienie go z terminala z opcją --allow-file-access-from-files może ci pomóc.
nickiaconis
12
Tak, to nie jest tak naprawdę wiele domen, gdy plik znajduje się w tym samym folderze co strona internetowa, teraz jest ... Odkryłem, że jeśli używasz Firefox zamiast Chrome, problem zniknie.
Sphinxxx

Odpowiedzi:

790

Moja kryształowa kula mówi, że ładujesz model używając albo file://albo C:/, który pozostaje wierny komunikatu o błędzie, ponieważ nie sąhttp://

Możesz więc zainstalować serwer WWW na lokalnym komputerze lub przesłać model w inne miejsce, a następnie użyć jsonpi zmienić adres URL nahttp://example.com/path/to/model

Pochodzenie jest zdefiniowane w RFC-6454 jako

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

Więc nawet jeśli plik pochodzi z tego samego hosta ( localhost), ale dopóki schemat jest inny ( http/ file), są one traktowane jako różne pochodzenie.

Andreas Wong
źródło
7
Tak, próbuję to zrobić file://, ale nie rozumiem, dlaczego jest to dozwolone. Cóż, instaluję Lampp chyba…
corazza
150
Wyobraź sobie, czy jest to dozwolone, i aplikację internetową, w której autor strony używa czegoś podobnego, load('file://C:/users/user/supersecret.doc')a następnie przesyła zawartość na swój serwer za pomocą ajax itp.
Andreas Wong
11
niestety polityka jest tworzona dla wszystkich przypadków, nie tylko dla ciebie :(, więc musisz się z tym
pogodzić
28
Na wiki GitHub znajduje się strona: github.com/mrdoob/three.js/wiki/How-to-run-things-locally
Felipe Lima
29
Możesz także użyć przełącznika --allow-file-access-from-files w chrome. Na moją odpowiedź tutaj: stackoverflow.com/questions/8449716/...
prauchfuss
609

Mówiąc wprost - tak, błąd mówi, że nie można skierować przeglądarki bezpośrednio na file://some/path/some.html

Oto kilka opcji szybkiego uruchomienia lokalnego serwera WWW, aby umożliwić przeglądarce renderowanie plików lokalnych

Python 2

Jeśli masz zainstalowany Python ...

  1. Zmień katalog na folder, w którym some.htmlistnieje plik lub pliki za pomocą poleceniacd /path/to/your/folder

  2. Uruchom serwer WWW Python za pomocą polecenia python -m SimpleHTTPServer

Spowoduje to uruchomienie serwera WWW do obsługi całej listy katalogów na http://localhost:8000

  1. Możesz użyć niestandardowego portu python -m SimpleHTTPServer 9000zapewniającego link:http://localhost:9000

To podejście jest wbudowane w każdą instalację Pythona.

Python 3

Wykonaj te same czynności, ale zamiast tego użyj następującego polecenia python3 -m http.server

Node.js

Alternatywnie, jeśli potrzebujesz bardziej responsywnej konfiguracji i już używasz nodejs ...

  1. Zainstaluj http-server, piszącnpm install -g http-server

  2. Przejdź do katalogu roboczego, w którym znajduje się twoje some.htmlżycie

  3. Uruchom serwer http, wydając http-server -c-1

Spowoduje to uruchomienie httpd Node.js, który obsługuje pliki w katalogu jako pliki statyczne dostępne z http://localhost:8080

Rubin

Jeśli twoim preferowanym językiem jest Ruby ... Rubinowi Bogowie twierdzą, że to również działa:

ruby -run -e httpd . -p 8080

PHP

Oczywiście PHP ma również swoje rozwiązanie.

php -S localhost:8000
Scott Stensland
źródło
3
Dzięki temu zaoszczędziłem mnóstwo czasu. Moja instalacja w Pythonie nie miała modułu SimpleHTTPServer, ale instrukcje węzła działały jak urok.
LukeP,
3
W odpowiedzi na komentarz LukeP w Pythonie 2.7 polecenie działa zgodnie z instrukcjami $ python -m SimpleHTTPServer, co powoduje wyświetlenie komunikatu: Serving HTTP on 0.0.0.0 port 8000 ...Jeśli przeliterujesz nazwę modułu, np. $ python -m SimpleHttpServerWtedy otrzymasz komunikat o błędzie No module named SimpleHttpServerOtrzymasz podobny komunikat o błędzie, jeśli masz python3 zainstalowany (v. python 2.7). Można sprawdzić wersję Pythona za pomocą polecenia: $ python --version. Możesz również określić port, na którym chcesz nasłuchiwać w następujący sposób:$ python -m SimpleHTTPServer 3333
7stud
1
Serwer python obsługuje pliki z katalogu, w którym uruchamiasz serwer. Jeśli więc pliki, które chcesz obsłużyć, znajdują się w / Users / 7stud / angular_projects / 1app, uruchom serwer w tym katalogu, np . $ cd ~/angular_projects/1appWtedy $ python -m SimpleHTTPServer. W przeglądarce wpisz adres URL http://localhost:8000/index.html. Możesz także zażądać plików w podkatalogach katalogu, w którym uruchomiłeś serwer, np.http://localhost:8000/subdir/hello.html
7stud
2
Słyszałem, że Python jest prosty i potężny, podobnie jak język „X”, ale to jest śmieszne! Nie trzeba instalować XAMPP ani instalować prostego serwera HTTP z węzłem do obsługi plików statycznych - jedno polecenie i boom! Dziękuję bardzo, oszczędza dużo czasu i problemów.
RD
2
NIESAMOWITE! - dla Pythona w systemie Windows użyj: python -m http.server 8080 ... lub dowolny inny port, a kiedy chcesz go zamknąć, po prostu ctrl-c.
Kristopher,
161

W Chrome możesz użyć tej flagi:

--allow-file-access-from-files

Przeczytaj więcej tutaj.

Społeczność
źródło
11
@ Blairg23, pamiętaj, że to rozwiązanie wymaga ponownego uruchomienia wszystkich instancji Chrome.exe, aby działało
Alex Klaus
3
Wyjaśnij, jak używać go w chrome.
Rishabh Agrahari
@Priya Nie powinien tego jednak robić
Suraj Jain,
Sugerowałbym używanie Chromium tylko do lokalnego debugowania (zaczynając od flagi --allow-file-access-from-files). Oznacza to używanie Chrome do zwykłego przeglądania stron internetowych i używanie Chromium jako domyślnej aplikacji do plików HTML.
Alan Zhiliang Feng
Pamiętaj, że fetch()i tak to zaprzecza. Musisz użyć XMLHttpRequestw jakiś sposób
Hashbrown
63

Wpadłem na to dzisiaj.

Napisałem kod, który wyglądał tak:

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

... ale powinno to wyglądać tak:

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

Jedyną różnicą był brak http://drugiego fragmentu kodu.

Chciałem tylko to przedstawić na wypadek, gdyby były inne z podobnym problemem.

James Harrington
źródło
40

Po prostu zmień adres URL na http://localhostzamiast localhost. Jeśli otworzysz plik HTML z lokalnego, powinieneś utworzyć serwer lokalny, który będzie obsługiwał ten plik HTML, najprostszym sposobem jest użycie Web Server for Chrome. To rozwiąże problem.

Fin
źródło
5
+1 do Web Server for Chromelinku do aplikacji - to zdecydowanie najprostsze i najczystsze rozwiązanie do tymczasowej konfiguracji httpd dla IMO Chrome
Uratowało mnie to. Dokładne rozwiązanie
Surya
18

W aplikacji na Androida - na przykład, aby umożliwić JavaScript, aby mieć dostęp do zasobów poprzez file:///android_asset/- stosowania setAllowFileAccessFromFileURLs(true)na WebSettingsktóre można uzyskać z wywołaniem getSettings()na WebView.

CommonsWare
źródło
Znakomity! Właśnie mieliśmy przepisać metody wstrzykiwania JSON do zmiennych .. ale to działa! webView.getSettings (). setAllowFileAccessFromFileURLs (true);
WallyHale,
15

Użyj http://lub, https://aby utworzyć adres URL

błąd :localhost:8080

rozwiązanie :http://localhost:8080

KARTHIKEYAN.A
źródło
14

najszybszym sposobem dla mnie było: dla użytkowników systemu Windows uruchom plik na Firefox rozwiązany problem, lub jeśli chcesz skorzystać z Chrome najłatwiejszym sposobem dla mnie było zainstalowanie Pythona 3, a następnie z wiersza polecenia Uruchom polecenie, python -m http.server a następnie przejdź do http: // localhost: 8000 / następnie przejdź do swoich plików

python -m http.server
Ridha Rezzag
źródło
13

Wymienię 3 różne podejścia do rozwiązania tego problemu:

  1. Korzystanie z bardzo lekkiego npmpakietu : Zainstaluj serwer na żywo za pomocą npm install -g live-server. Następnie przejdź do tego katalogu otwórz terminal i wpisz live-serveri naciśnij Enter, strona zostanie wyświetlona localhost:8080. BONUS: Domyślnie obsługuje również ponowne ładowanie na gorąco.
  2. Korzystanie z lekkiej aplikacji Google Chrome opracowanej przez Google : Zainstaluj aplikację, a następnie przejdź do karty aplikacji w Chrome i otwórz aplikację. W aplikacji wskaż odpowiedni folder. Twoja strona zostanie wyświetlona!
  3. Modyfikowanie skrótu Chrome w systemie Windows : Utwórz skrót przeglądarki Chrome. Kliknij ikonę prawym przyciskiem myszy i otwórz właściwości. We właściwościach, edytować targetdo "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession"i oszczędzać. Następnie za pomocą Chrome otwórz stronę za pomocą ctrl+o. UWAGA: NIE używaj tego skrótu do regularnego przeglądania.
Czarnobrody
źródło
12

Dla tych, którzy korzystają z systemu Windows bez Pythona lub Node.js, nadal istnieje lekkie rozwiązanie: Mongoose .

Wystarczy przeciągnąć plik wykonywalny w dowolne miejsce, w którym powinien znajdować się katalog główny serwera, i uruchomić go. Ikona pojawi się na pasku zadań i przejdzie do serwera w domyślnej przeglądarce.

Ponadto Z-WAMP jest w 100% przenośnym WAMP działającym w jednym folderze, jest niesamowity. Jest to opcja, jeśli potrzebujesz szybkiego serwera PHP i MySQL.

bryc
źródło
Jeśli zainstalujesz php lub zainstalowałeś, możesz uruchomić serwer w swoim folderze: php.net/manual/es/features.commandline.webserver.php
jechaviz
12

Jeśli korzystasz z Mozilla Firefox, będzie działać zgodnie z oczekiwaniami bez żadnych problemów;

PS Zaskakująco, IntenetExplorer_Edge działa absolutnie dobrze !!!

Yash P Shah
źródło
1
nigdy więcej. Firefox i tj. oba blokują dla mnie żądanie Cors.
Baahubali,
to również nie jest dobre, aby uzyskać dostęp do niezabezpieczonych stron: D
csomakk
6

Proste rozwiązanie dla kogo za pomocą VS Code

Ten błąd pojawia się od jakiegoś czasu. Większość odpowiedzi działa. Ale znalazłem inne rozwiązanie. Jeśli nie chcesz zajmować się tutaj node.jsani żadnym innym rozwiązaniem i pracujesz z plikiem HTML (wywoływanie funkcji z innego pliku js lub pobieranie Json API), spróbuj użyć rozszerzenia Live Server .

Pozwala łatwo otworzyć serwer na żywo. A ponieważ tworzy localhostserwer, problem został rozwiązany. Możesz po prostu localhostotworzyć plik HTML i kliknąć edytor prawym przyciskiem myszy i kliknąć Open with Live Server.

Zasadniczo ładuje pliki za pomocą http://localhost/index.htmlzamiast za pomocą file://....

EDYTOWAĆ

.htmlPlik nie jest konieczny . Możesz uruchomić Serwer Live za pomocą skrótów.

Naciśnij, (alt+L, alt+O)aby otworzyć serwer i (alt+L, alt+C)zatrzymać serwer. [Na MAC cmd+L, cmd+Oi cmd+L, cmd+C]

Mam nadzieję, że to komuś pomoże :)

Ömürcan Cengiz
źródło
4

Właśnie ten błąd pojawiał się podczas ładowania pliku HTML w przeglądarce, która używała pliku json z katalogu lokalnego. W moim przypadku udało mi się to rozwiązać, tworząc prosty serwer węzłów, który pozwalał na serwowanie zawartości statycznej. Zostawiłem kod do tego przy innej odpowiedzi .

thehme
źródło
4

Sugeruję, abyś używał mini-serwera do uruchamiania tego rodzaju aplikacji na localhost (jeśli nie używasz wbudowanego serwera).

Oto bardzo prosty w konfiguracji i uruchomieniu:

https://www.npmjs.com/package/tiny-server
Deniss M.
źródło
4

Podejrzewam, że jest już wspomniany w niektórych odpowiedziach, ale nieznacznie go zmodyfikuję, aby uzyskać pełną odpowiedź roboczą (łatwiejszą do znalezienia i użycia).

  1. Idź do: https://nodejs.org/en/download/ . Zainstaluj nodejs.

  2. Zainstaluj serwer http, uruchamiając polecenie z wiersza polecenia npm install -g http-server.

  3. Przejdź do katalogu roboczego, w którym index.html/ yoursome.htmlrezyduje.

  4. Uruchom serwer http, uruchamiając polecenie http-server -c-1

Otwórz przeglądarkę internetową http://localhost:8080 lub http://localhost:8080/yoursome.html - w zależności od nazwy pliku HTML.

TarmoPikaro
źródło
3

Po prostu mówi, że aplikacja powinna być uruchomiona na serwerze WWW. Miałem ten sam problem z Chrome, uruchomiłem tomcat i przeniosłem tam swoją aplikację, i zadziałało.

Włącz
źródło
1

er. Właśnie znalazłem kilka oficjalnych słów: „Próba załadowania niezbudowanych, zdalnych modułów AMD korzystających z wtyczki dojo / text zakończy się niepowodzeniem z powodu ograniczeń bezpieczeństwa dotyczących różnych źródeł. (Nie ma to wpływu na wbudowane wersje modułów AMD, ponieważ połączenia do dojo / text są eliminowane przez system kompilacji.) „ https://dojotoolkit.org/documentation/tutorials/1.10/cdn/

YUIOP QWERT
źródło
1

Jednym ze sposobów, w jaki działało ładowanie plików lokalnych, jest używanie ich w folderze projektu zamiast poza folderem projektu. Utwórz jeden folder w przykładowych plikach projektu, podobnie jak my tworzymy dla obrazów i zastąp sekcję, w której używasz pełnej ścieżki lokalnej innej niż ścieżka projektu i użyj względnego adresu URL pliku w folderze projektu. To zadziałało dla mnie

Naga Sai A.
źródło
1

Dla wszystkich MacOS... skonfiguruj prosty LaunchAgent, aby włączyć te efektowne funkcje we własnej kopii Chrome ...

Zapisz plist, o dowolnej nazwie ( launch.chrome.dev.mode.plistna przykład) ~/Library/LaunchAgentsz podobną zawartością do ...

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

Powinien zostać uruchomiony przy starcie .. ale możesz to zrobić w dowolnym momencie za pomocą polecenia terminalu

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

TADA! 😎 💁🏻 🙊 🙏🏾

Alex Gray
źródło
1
  • Zainstaluj lokalny serwer WWW dla Javy, np. Tomcat, dla php możesz użyć lampy itp
  • Upuść plik json w ogólnodostępnym katalogu serwera aplikacji
  • Element listy

  • Uruchom serwer aplikacji i powinieneś mieć dostęp do pliku z localhost

Fred Ondieki
źródło
1

Nie można załadować statycznych plików lokalnych (np. Svg) bez serwera. Jeśli na komputerze jest zainstalowany NPM / YARN, możesz skonfigurować prosty serwer http za pomocą „ serwera http

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

Lub otwórz terminal w tym folderze projektu i wpisz „hs”. Automatycznie uruchomi serwer HTTP na żywo.

Sujith S.
źródło
podwójna odpowiedź
Scott Stensland,
0

Udało mi się również odtworzyć ten komunikat o błędzie podczas używania tagu zakotwiczenia z następującym hrefem:

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

W moim przypadku użyto tagu, aby uzyskać „kursor wskaźnika”, a zdarzenie było faktycznie kontrolowane przez jQuery po kliknięciu. Usunąłem href i dodałem klasę, która ma zastosowanie:

cursor:pointer;

mgilberties
źródło
0

Użytkownicy Linux Python:

import webbrowser
browser = webbrowser.get('google-chrome --allow-file-access-from-files %s')
browser.open(url)
Daniel Braun
źródło
Czy nie ma powodu, dla którego google-chrome --allow-file-access-from-files <url>miałby nie działać i być bardziej zwięzły?
agupta231
@ agupta231 Moduł przeglądarki internetowej ma argumenty, które umożliwiają różne rodzaje „otwierania”, np. otwórz w bieżącej karcie, nowej karcie, nowym oknie itp.
Daniel Braun
0

Jeśli nalegasz, aby .htmlplik był uruchamiany lokalnie i nie był serwowany na serwerze WWW, możesz w pierwszej kolejności zapobiec pojawianiu się żądań krzyżowych, udostępniając problematyczne zasoby.

Miałem ten problem podczas próby udostępniania .jsplików file://. Moim rozwiązaniem było zaktualizowanie skryptu kompilacji w celu zastąpienia <script src="...">tagów <script>...</script>. Oto gulppodejście do tego:

1. uruchomić npm install --save-devdo opakowań gulp, gulp-inlinea del.

2. Po utworzeniu a gulpfile.jsdo katalogu głównego dodaj następujący kod (po prostu zmień ścieżki do plików, które Ci odpowiadają):

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. Uruchom gulp bundle-for-locallub zaktualizuj skrypt kompilacji, aby uruchomić go automatycznie.

Można zobaczyć szczegółowe problemy i rozwiązania dla mojego przypadku tutaj .

noamyg
źródło
-1

Cordova to osiągnąć. Nadal nie mogę zrozumieć, jak to zrobiła Cordova. To nawet nie przechodzi przez powinnaInterceptRequest.

Później dowiedziałem się, że kluczem do załadowania dowolnego pliku z lokalnego jest: myWebView.getSettings (). SetAllowUniversalAccessFromFileURLs (true);

A jeśli chcesz uzyskać dostęp do dowolnego zasobu HTTP, przeglądarka internetowa sprawdzi metodę OPTIONS, którą możesz udzielić dostępu za pośrednictwem WebViewClient.shouldInterceptRequest, zwracając odpowiedź, a dla następującej metody GET / POST możesz po prostu zwrócić wartość null.

użytkownik1462586
źródło
-1

Doświadczyłem tego, gdy pobrałem stronę do przeglądania w trybie offline.

Po prostu musiałem wyjąć integrity="*****"i crossorigin="anonymous"atrybutów ze wszystkich <link>i <script>znaczników

aphoe
źródło