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

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

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.

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

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

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

--allow-file-access-from-files

Przeczytaj więcej tutaj.

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.

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.

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.

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

błąd :localhost:8080

rozwiązanie :http://localhost:8080

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

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.

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.

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

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

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 .

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

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.

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.

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/

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

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

• 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

• 

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

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.

Wiele problemów z tym związane, z moim problemem brakuje '/' przykład: jquery-1.10.2.js: 8720 XMLHttpRequest nie może załadować http: // localhost: xxxProduct / getList_tagLabels / Musi to być: http: // localhost: xxx / Product / getList_tagLabels /

Mam nadzieję, że ta pomoc dla osób, które spełniają ten problem.

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;

Użytkownicy Linux Python:

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

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

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

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.

najpierw zamknij wszystkie wystąpienia chrome.

po tym postępuj zgodnie z tym.

Użyłem tego polecenia na komputerze Mac.

„/ Aplikacje / Google Chrome.app/Contents/MacOS/Google Chrome” --allow-file-access-from-files

Dla Windowsa:

Jak uruchomić HTML za pomocą Chrome w trybie „--allow-file-access-from-files”?

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