XMLHttpRequest Origin null не дозволено Access-Control-Allow-Origin для файлу: /// до файлу: /// (без сервера)

Я намагаюся створити веб-сайт, який можна завантажити та запустити локально, запустивши його індексний файл.

Усі файли локальні, ресурси не використовуються в Інтернеті.

Коли я намагаюся використовувати плагін AJAXSLT для jQuery для обробки файлу XML з шаблоном XSL (у підкаталогах), я отримую такі помилки:

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.

Індексний файл, що робить запит file:///C:/path/to/XSL%20Website/index.html, зберігається у використанні файлів JavaScript file:///C:/path/to/XSL%20Website/assets/js/.

Як я можу вирішити цю проблему?

У випадках, коли локальний веб-сервер не є можливим, ви можете дозволити Chrome доступ до file://файлів через перемикач браузера. Після деякого копання я знайшов цю дискусію , в якій згадується перемикач браузера у відкритті. Запустіть свій примірник Chrome:

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

Це може бути прийнятним для середовищ розробки, але мало іншого. Ти, звичайно, не хочеш цього постійно. Це все ще залишається відкритим питанням (станом на січень 2011 року).

Дивіться також: Проблеми з jQuery getJSON при використанні локальних файлів у Chrome

По суті єдиний спосіб впоратися з цим - це запустити веб-сервер на localhost і обслуговувати їх звідти.

Веб-браузер небезпечно дозволити запиту ajax отримати доступ до будь-якого файлу на вашому комп’ютері, тому, здається, більшість браузерів трактує запити "file: //" як такі, що не мають походження для цілей "тієї ж політики оригіналу "

Запуск веб-сервера може бути настільки тривіальним, як cdі в каталог, у якому знаходяться файли та які працюють:

python -m SimpleHTTPServer

Ось яблучний сценарій, який запустить Chrome із увімкненим перемикачем --allow-file-access-from-files для ОСХ / 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 &"

Це рішення дозволить завантажити локальний скрипт за допомогою jQuery.getScript (). Це глобальне налаштування, але ви також можете встановити параметр crossDomain на основі запиту.

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

Як щодо використання функції FileReader javascript для відкриття локального файлу, тобто:

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

Тепер натисніть Choose fileкнопку та перейдіть до файлуfile:///C:/path/to/XSL%20Website/data/home.xml

Запуск хром , як так , щоб обійти це обмеження: open -a "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --args --allow-file-access-from-files.

Отриманий з коментаря Джоша Лі, але мені потрібно було вказати повний шлях до Google Chrome, щоб уникнути відкриття Google Chrome з мого розділу Windows (у паралелях).

Я просто працював над цим, щоб не використовувати XMLHTTPRequest взагалі, а включати дані, необхідні в окремому файлі javascript. (У моєму випадку для використання з https://github.com/kripken/sql.js/ мені потрібен був бінарний блок SQLite )

Я створив файл під назвою base64_data.js(і використовував btoa()для перетворення потрібних мені даних і вставляв їх, <div>щоб я міг скопіювати їх).

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

а потім включив дані в html як звичайний 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>

Я думаю, було б тривіально модифікувати це для читання JSON, можливо, навіть XML; Я залишу це як вправу для читача;)

Ви можете спробувати покласти 'Access-Control-Allow-Origin':'*'в response.writeHead(, {[here]}).

використовуйте "веб-сервер для програми Chrome". (у вас насправді це є на вашому ПК, чим це ви знаєте чи ні. Просто шукайте його в Кортані!). відкрийте його і натисніть «вибрати файл», виберіть папку з файлом у ній. насправді не вибирайте файл. виберіть папку з файлами, а потім натисніть на посилання під кнопкою "вибрати папку".

якщо він не бере вас у файл, то додайте ім'я файлу до urs. подобається це:

   https://127.0.0.1:8887/fileName.txt

посилання на веб-сервер для хрому: натисніть на мене