XMLHttpRequest Origin null jest niedozwolony Kontrola dostępu-Allow-Origin dla pliku: /// do pliku: /// (bez serwera)

Próbuję utworzyć witrynę internetową, którą można pobrać i uruchomić lokalnie, uruchamiając plik indeksu.

Wszystkie pliki są lokalne, żadne zasoby nie są używane online.

Kiedy próbuję użyć wtyczki AJAXSLT dla jQuery do przetworzenia pliku XML z szablonem XSL (w podkatalogach), otrzymuję następujące błędy:

XMLHttpRequest cannot load file:///C:/path/to/XSL%20Website/data/home.xml. Origin null is not allowed by Access-Control-Allow-Origin.

XMLHttpRequest cannot load file:///C:/path/to/XSL%20Website/assets/xsl/main.xsl. Origin null is not allowed by Access-Control-Allow-Origin.

Plik indeksu wysyłający zapytanie jest file:///C:/path/to/XSL%20Website/index.htmlprzechowywany w, gdy używane są pliki JavaScript file:///C:/path/to/XSL%20Website/assets/js/.

Jak mogę rozwiązać ten problem?

W przypadkach, w których uruchomienie lokalnego serwera WWW nie jest możliwe, możesz zezwolić Chromeowi na dostęp do file://plików za pomocą przełącznika przeglądarki. Po kilku kopaniach znalazłem tę dyskusję , która wspomina przełącznik przeglądarki w otwierającym poście. Uruchom instancję Chrome za pomocą:

chrome.exe --allow-file-access-from-files

Może to być akceptowalne w środowiskach programistycznych, ale niewiele więcej. Na pewno nie chcesz tego cały czas. To wciąż wydaje się być kwestią otwartą (od stycznia 2011 r.).

Zobacz także: Problemy z jQuery getJSON przy użyciu lokalnych plików w Chrome

Zasadniczo jedynym sposobem na poradzenie sobie z tym jest uruchomienie serwera WWW na localhost i obsługa go stamtąd.

Przeglądarka nie jest pewna, aby zezwolić żądaniu ajax na dostęp do dowolnego pliku na twoim komputerze, dlatego większość przeglądarek traktuje żądania „file: //” jako niepochodzące do celów „ Polityki tego samego pochodzenia ”

Uruchomienie serwera WWW może być tak proste, jak cdwejście do katalogu, w którym znajdują się i działają pliki:

python -m SimpleHTTPServer

Oto skrypt Apple, który uruchomi Chrome z włączonym przełącznikiem --allow-file-access-from-files, dla deweloperów OSX / Chrome:

set chromePath to POSIX path of "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"    
set switch to " --allow-file-access-from-files"
do shell script (quoted form of chromePath) & switch & " > /dev/null 2>&1 &"

To rozwiązanie pozwoli Ci załadować lokalny skrypt za pomocą jQuery.getScript (). Jest to ustawienie globalne, ale można również ustawić opcję crossDomain na podstawie żądania.

$.ajaxPrefilter( "json script", function( options ) {
  options.crossDomain = true;
});

Co z użyciem funkcji FileReader javascript do otwarcia pliku lokalnego, tj .:

<input type="file" name="filename" id="filename">
<script>
$("#filename").change(function (e) {
  if (e.target.files != undefined) {
    var reader = new FileReader();
    reader.onload = function (e) {
        // Get all the contents in the file
        var data = e.target.result; 
        // other stuffss................            
    };
    reader.readAsText(e.target.files.item(0));
  }
});
</script>

Teraz kliknij Choose fileprzycisk i przejdź do plikufile:///C:/path/to/XSL%20Website/data/home.xml

Uruchomienie chrom jak tak do obejścia tego ograniczenia: open -a "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --args --allow-file-access-from-files.

Pochodzi z komentarza Josha Lee, ale musiałem podać pełną ścieżkę do Google Chrome, aby uniknąć otwierania Google Chrome z mojej partycji Windows (w Parallels).

Sposób, w jaki właśnie to obejrzałem, nie polega wcale na korzystaniu z XMLHTTPRequest, ale na dołączeniu potrzebnych danych do osobnego pliku javascript. (W moim przypadku potrzebowałem binarnego obiektu blob SQLite do użycia z https://github.com/kripken/sql.js/ )

Utworzyłem plik o nazwie base64_data.js(i użyłem go btoa()do konwersji potrzebnych danych i wstawienia go, <div>aby móc go skopiować).

var base64_data = "U1FMaXRlIGZvcm1hdCAzAAQA ...<snip lots of data> AhEHwA==";

a następnie zawarł dane w html jak normalny javascript:

<div id="test"></div>

<script src="base64_data.js"></script>
<script>
    data = atob(base64_data);
    var sqldb = new SQL.Database(data);
    // Database test code from the sql.js project
    var test = sqldb.exec("SELECT * FROM Genre");
    document.getElementById("test").textContent = JSON.stringify(test);
</script>

Wyobrażam sobie, że modyfikacja tego do odczytu JSON, a może nawet XML, byłaby trywialna; Zostawię to jako ćwiczenie dla czytelnika;)

Można spróbować umieścić 'Access-Control-Allow-Origin':'*'w response.writeHead(, {[here]}).

użyj „serwera WWW dla aplikacji Chrome”. (faktycznie masz go na swoim komputerze, niezależnie od tego, czy wiesz. Po prostu wyszukaj go w Cortanie!). otwórz go i kliknij „wybierz plik”, wybierz folder z plikiem. nie wybieraj pliku. wybierz folder plików, a następnie kliknij łącze (łącza) pod przyciskiem „wybierz folder”.

jeśli nie zabierze Cię do pliku, dodaj nazwę pliku do urs. lubię to:

   https://127.0.0.1:8887/fileName.txt

link do serwera WWW dla chrome: kliknij mnie