XMLHttpRequest nie może załadować pliku. Żądania z różnych źródeł są obsługiwane tylko w przypadku protokołu HTTP

Otrzymuję następujący błąd:

XMLHttpRequest cannot load file:///C:/Users/richa.agiwal/Desktop/get/rm_Library/templates/template_viewSettings.html. Cross origin requests are only supported for HTTP. 

Zdaję sobie sprawę, że na to pytanie udzielono już wcześniej odpowiedzi, ale nadal nie znalazłem rozwiązania mojego problemu. Próbowałem uruchomić chrome.exe --allow-file-access-from-filesz wiersza poleceń i przeniosłem plik do lokalnego systemu plików, ale nadal pojawia się ten sam błąd.

Doceniam wszelkie sugestie!

Jeśli robisz coś takiego, jak pisanie HTML i Javascript w edytorze kodu na komputerze osobistym i testowanie danych wyjściowych w przeglądarce, prawdopodobnie otrzymasz komunikaty o błędach o Cross Origin Requests. Twoja przeglądarka będzie renderować HTML i uruchamiać Javascript, jQuery, angularJs w przeglądarce bez konieczności konfigurowania serwera. Jednak wiele przeglądarek internetowych jest zaprogramowanych do wykrywania ataków między witrynami i blokuje żądania. Nie chcesz, aby ktokolwiek mógł odczytać Twój dysk twardy z przeglądarki internetowej. Możesz stworzyć w pełni funkcjonalną stronę internetową za pomocą Notepad ++, która będzie uruchamiała Javascript oraz frameworki takie jak jQuery i angularJs; i przetestuj wszystko, używając pozycji menu Notepad ++,RUN, LAUNCH IN FIREFOX. To przyjemny, łatwy sposób na rozpoczęcie tworzenia strony internetowej, ale kiedy zaczynasz tworzyć coś więcej niż układ, css i prostą nawigację po stronach, potrzebujesz lokalnego serwera skonfigurowanego na swoim komputerze.

Oto kilka opcji, których używam.

1. Przetestuj swoją stronę internetową lokalnie w przeglądarce Firefox, a następnie przeprowadź wdrożenie na hoście.
2. lub: Uruchom serwer lokalny

Przetestuj w przeglądarce Firefox, wdróż na hoście

1. Firefox obecnie zezwala na żądania Cross Origin z plików obsługiwanych z dysku twardego
2. Twoja witryna hostingowa zezwala na żądania dotyczące plików w folderach skonfigurowanych w pliku manifestu

Uruchom serwer lokalny

• Uruchom serwer na swoim komputerze, taki jak Apache lub Python
• Python nie jest serwerem, ale będzie działał na prostym serwerze

Uruchom lokalny serwer w języku Python

Uzyskaj swój adres IP:

• W systemie Windows: otwórz „Wiersz polecenia”. Wszystkie programy, akcesoria, wiersz polecenia
• Zawsze używam Command Promptas Administrator. Kliknij prawym przyciskiem myszy Command Promptpozycję menu i wyszukajRun As Administrator
• Wpisz polecenie: ipconfigi naciśnij Enter.
• Poszukaj: Adres IPv4. . . . . . . . 12.123.123.00
• Istnieją witryny internetowe, które wyświetlają również Twój adres IP

Jeśli nie masz Pythona, pobierz go i zainstaluj.

Korzystając z „wiersza polecenia”, musisz przejść do folderu, w którym znajdują się pliki, które mają służyć jako strona internetowa.

• Jeśli chcesz wrócić do katalogu C: \ Root - wpisz cd /
• wpisz Dysk CD: \ Folder \ Folder \ etc, aby dostać się do folderu, w którym znajduje się plik .Html (lub php itp.)
• Sprawdź ścieżkę. wpisz: ścieżka w wierszu polecenia. Musisz zobaczyć ścieżkę do folderu, w którym znajduje się Python. Na przykład, jeśli python znajduje się w C: \ Python27, musisz zobaczyć ten adres w wymienionych ścieżkach.
• Jeśli ścieżka do katalogu Pythona nie znajduje się w ścieżce, musisz ustawić ścieżkę. wpisz: ścieżka pomocy i naciśnij Enter. Zobaczysz pomoc dla ścieżki.
• Wpisz na przykład: path c: \ python27% path%
• % path% zachowuje wszystkie twoje obecne ścieżki. Nie chcesz wymazać wszystkich obecnych ścieżek, po prostu dodaj nową ścieżkę.
• Utwórz nową ścieżkę Z folderu, w którym chcesz udostępniać pliki.
• Uruchom serwer Python: Wpisz: python -m SimpleHTTPServer portGdzie „port” to na przykład numer portu, który chceszpython -m SimpleHTTPServer 1337
• Jeśli pozostawisz port pusty, domyślnie będzie to port 8000
• Jeśli serwer Python uruchomi się pomyślnie, zobaczysz komunikat msg.

Uruchom aplikację sieci Web lokalnie

• Otwórz przeglądarkę
• W wierszu adresu wpisz: http://your IP address:port
• http://xxx.xxx.x.x:1337 lub http://xx.xxx.xxx.xx:8000domyślnie
• Jeśli serwer działa, zobaczysz listę swoich plików w przeglądarce
• Kliknij plik, który chcesz udostępnić, a powinien się wyświetlić.

Bardziej zaawansowane rozwiązania

• Zainstaluj edytor kodu, serwer WWW i inne zintegrowane usługi.

Możesz zainstalować Apache, PHP, Python, SQL, Debuggery itp. Wszystkie osobno na swoim komputerze, a następnie spędzić dużo czasu, próbując wymyślić, jak je wszystkie ze sobą współpracować, lub poszukać rozwiązania, które łączy te wszystkie rzeczy.

Lubię używać XAMPP z NetBeans IDE. Możesz także zainstalować WAMP, który umożliwia User Interfacezarządzanie i integrację Apache i innych usług.

Proste rozwiązanie

Jeśli pracujesz z czystymi plikami html / js / css.

Zainstaluj tę małą aplikację serwerową ( link ) w przeglądarce Chrome. Otwórz aplikację i wskaż lokalizację pliku na katalog projektu.

Przejdź do adresu URL wyświetlanego w aplikacji.

Edycja: inteligentniejsze rozwiązanie przy użyciu Gulp

Krok 1: Aby zainstalować Gulp. Uruchom następujące polecenie w swoim terminalu.

npm install gulp-cli -g
npm install gulp -D

Krok 2: W katalogu projektu utwórz plik o nazwie gulpfile.js. Skopiuj w nim następującą zawartość.

var gulp        = require('gulp');
var bs          = require('browser-sync').create();   

gulp.task('serve', [], () => {
        bs.init({
            server: {
               baseDir: "./",
            },
            port: 5000,
            reloadOnRestart: true,
            browser: "google chrome"
        });
        gulp.watch('./**/*', ['', bs.reload]);
});

Krok 3: Zainstaluj wtyczkę gulp do synchronizacji przeglądarki. W tym samym katalogu, w którym znajduje się plik gulpfile.js, uruchom następujące polecenie

npm install browser-sync gulp --save-dev

Krok 4: Uruchom serwer. W tym samym katalogu, w którym znajduje się plik gulpfile.js, uruchom następujące polecenie

gulp serve

Ten błąd występuje, ponieważ właśnie otwierasz dokumenty html bezpośrednio z przeglądarki. Aby to naprawić, musisz udostępnić swój kod z serwera WWW i uzyskać do niego dostęp na hoście lokalnym. Jeśli masz konfigurację Apache, użyj jej do obsługi plików. Niektóre IDE mają wbudowane serwery internetowe, takie jak IDE JetBrains, Eclipse ...

Jeśli masz konfigurację Node.Js, możesz użyć serwera http . Po prostu biegnij, npm install http-server -ga będziesz mógł go używać w terminalu jak http-server C:\location\to\app. Kirill Fuchs

Aby dodać tutaj szczegółową odpowiedź Alana Wellsa , jest to szybkie rozwiązanie

Uruchom serwer lokalny

możesz udostępniać dowolny folder na swoim komputerze za pomocą usługi Serve

Najpierw przejdź za pomocą wiersza poleceń do folderu, który chcesz obsługiwać.

Następnie

npx i -g serve
serve

lub jeśli chcesz przetestować usługę Serve, pobierając ją

npx serve

i to wszystko! Możesz przeglądać swoje pliki pod adresem http: // localhost: 5000

Napotkałem ten błąd podczas lokalnego wdrażania projektu interfejsu API sieci Web i wywoływałem projekt API tylko z adresem URL podanym poniżej:

localhost // myAPIProject

Ponieważ komunikat o błędzie mówi, że nie jest to http: //, zmieniłem adres URL i wstawiłem prefiks http, jak podano poniżej, i błąd zniknął.

http: // localhost // myAPIProject

Jeśli korzystasz z WebStorm Javascript IDE , możesz po prostu otworzyć swój projekt z WebStorm w przeglądarce. WebStorm automatycznie uruchomi serwer i nie będziesz już otrzymywać żadnego z tych błędów, ponieważ masz teraz dostęp do plików za pomocą dozwolonych / obsługiwanych protokołów (HTTP).

Zależy od Twoich potrzeb, ale istnieje również szybki sposób tymczasowego sprawdzenia (fikcyjnego) JSON, zapisując go na http://myjson.com . Skopiuj link do interfejsu API i wklej go do kodu javascript. Altówka! Kiedy chcesz wdrożyć kody, nie możesz zapomnieć o zmianie tego adresu URL w swoich kodach!

Umieść folder projektu w htdocs katalogu Xampp Uruchom serwer Apache za pomocą panelu sterowania Xampp, a następnie otwórz przeglądarkę w celu przejścia do lokalnego hosta / folderu projektu i zacznij działać