"Запити перехресного походження підтримуються лише для HTTP." помилка під час завантаження локального файлу

Я намагаюся завантажити 3D-модель в Three.js JSONLoader, і ця 3D-модель знаходиться в тому ж каталозі, що і весь веб-сайт.

Я отримую "Cross origin requests are only supported for HTTP."помилку, але не знаю, що її спричиняє, і як її виправити.

Мій кришталевий куля говорить про те, що ви завантажуєте модель, використовуючи або, file://або C:/, що залишається вірним повідомленню про помилку, як їх немаєhttp://

Таким чином, ви можете або встановити веб-сервер у свій локальний ПК, або завантажити модель десь в іншому місці, а також використовувати jsonpта змінити URL наhttp://example.com/path/to/model

Походження визначено в RFC-6454 як

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

Тож, хоча ваш файл походить з того самого хоста ( localhost), але поки схема відрізняється ( http/ file), вони розглядаються як різне походження.

Щоб бути явним - Так, помилка говорить про те, що ви не можете вказувати свій веб-переглядач безпосередньо file://some/path/some.html

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

Пітон 2

Якщо у вас встановлений Python ...

1. Змініть каталог у папку, де ваш файл some.htmlчи файл (и) існують за допомогою командиcd /path/to/your/folder

2. Запустіть веб-сервер Python за допомогою команди python -m SimpleHTTPServer

Це запустить веб-сервер для розміщення всього списку каталогів за адресою http://localhost:8000

3. Ви можете використовувати спеціальний порт, який python -m SimpleHTTPServer 9000дає вам посилання:http://localhost:9000

Цей підхід вбудований у будь-яку установку Python.

Пітон 3

Виконайте ті ж дії, але замість цього скористайтеся наступною командою python3 -m http.server

Node.js

Крім того, якщо ви вимагаєте більш чутливих налаштувань і вже використовуєте nodejs ...

1. Встановити http-server, ввівшиnpm install -g http-server

2. Перейдіть у свій робочий каталог, де some.htmlживе ваше життя

3. Запустіть свій http сервер, видавши http-server -c-1

Це створює http-код Node.js, який подає файли у вашому каталозі як статичні файли, з яких можна отримати http://localhost:8080

Рубін

Якщо улюбленою мовою є Рубі ... Боги Рубін кажуть, що це також працює:

ruby -run -e httpd . -p 8080

PHP

Звичайно, PHP також має своє рішення.

php -S localhost:8000

У Chrome ви можете використовувати цей прапор:

--allow-file-access-from-files

Детальніше читайте тут.

Зустрілися до цього сьогодні.

Я написав код, який виглядав приблизно так:

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

... але це мало виглядати так:

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

Єдиною відмінністю була відсутність http://у другому фрагменті коду.

Просто хотів це викласти на випадок, якщо є інші, які мають подібну проблему.

Просто змініть URL на, http://localhostа не на localhost. Якщо ви відкриєте файл html з локального, вам слід створити локальний сервер для обслуговування цього html-файлу, використовуючи найпростіший спосіб Web Server for Chrome. Це вирішить проблему.

Наприклад, у додатку для Android, щоб дозволити JavaScript мати доступ до активів через file:///android_asset/- використовуйте setAllowFileAccessFromFileURLs(true)те, WebSettingsщо ви отримуєте від дзвінкаgetSettings() на WebView.

Використовуйте http://або https://для створення URL-адреси

помилка :localhost:8080

рішення :http://localhost:8080

найшвидший спосіб для мене був: для користувачів Windows запустіть ваш файл на вирішеній проблемі Firefox, або якщо ви хочете використовувати chrome, найпростішим способом для мене було встановити Python 3, то з командної строки запустіть команду, python -m http.server потім перейдіть на http: // localhost: 8000 / потім перейдіть до своїх файлів

python -m http.server

Я перерахую 3 різні підходи до вирішення цього питання:

1. Використання дуже легкого npmпакету : Встановіть живий сервер за допомогою npm install -g live-server. Потім перейдіть до цієї директорії, відкрийте термінал і введіть live-serverта натисніть клавішу Enter, на якій буде розміщена сторінкаlocalhost:8080 . БОНУС: Він також підтримує гаряче перезавантаження за замовчуванням.
2. Використовуючи легкий додаток Google Chrome , розроблений Google : Установіть програму, перейдіть на вкладку додатків у Chrome і відкрийте додаток. У додатку наведіть його на праву папку. Ваша сторінка буде розміщена!
3. Змінення ярлика Chrome у вікнах : Створіть ярлик браузера Chrome. Клацніть правою кнопкою миші на значку та відкрийте властивості. У властивостях, редагувати targetдо "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession"і зберегти. Потім за допомогою Chrome відкрийте сторінку за допомогою ctrl+o. ПРИМІТКА: НЕ використовуйте цю ярлику для регулярного перегляду.

Для тих, хто має Windows без Python або Node.js, є ще легке рішення: Mongoose .

Все, що вам потрібно зробити - це перетягнути виконуваний файл туди, де має бути корінь сервера, та запустіть його. На панелі завдань з’явиться значок, який перейде на сервер у браузері за замовчуванням.

Також Z-WAMP - це 100% портативний WAMP, який працює в одній папці, це приголомшливо. Це варіант, якщо вам потрібен швидкий сервер PHP та MySQL.

Якщо ви використовуєте Mozilla Firefox, він буде працювати, як очікувалося, без проблем;

PS Дивно, але IntenetExplorer_Edge працює прекрасно !!!

Просте рішення для кого з використанням VS Code

Я певний час отримував цю помилку. Більшість відповідей працює. Але я знайшов інше рішення. Якщо ви не хочете мати справу з node.jsбудь-яким іншим рішенням тут, і ви працюєте з HTML-файлом (викликом функцій з іншого js-файлу чи отримання файлу json api), спробуйте використовувати Live Server розширенням .

Це дозволяє легко відкрити живий сервер. І через це створює localhostсервер, проблема вирішується. Ви можете просто запустити localhostфайл, відкривши файл HTML і клацніть правою кнопкою миші на редакторі та натисніть на Open with Live Server.

Це в основному завантаження файлів, http://localhost/index.htmlа не використання file://....

EDIT

.htmlФайл не обов’язково мати . Можна запустити Live Server за допомогою ярликів.

Натисніть, (alt+L, alt+O)щоб відкрити сервер і (alt+L, alt+C)зупинити сервер. [Про MAC cmd+L, cmd+Oта cmd+L, cmd+C]

Сподіваюся, це комусь допоможе :)

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

Я пропоную вам використовувати міні-сервер для запуску таких програм у localhost (якщо ви не використовуєте якийсь вбудований сервер).

Ось такий, який дуже просто встановити та запустити:

https://www.npmjs.com/package/tiny-server

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

1. Перейдіть за посиланням: https://nodejs.org/en/download/ . Встановити nodejs.

2. Встановіть http-сервер, запустивши команду з командного рядка npm install -g http-server.

3. Перейдіть у свій робочий каталог, де index.html/ yoursome.htmlпроживає.

4. Запустіть свій http сервер, запустивши команду http-server -c-1

Відкрийте веб-браузер до http://localhost:8080 або http://localhost:8080/yoursome.html - залежно від назви файлу html.

Це просто говорить про те, що додаток слід запускати на веб-сервері. У мене була така ж проблема з хромом, я запустив tomcat і переніс свою заявку туди, і вона спрацювала.

е. Щойно я знайшов офіційні слова "Спроба завантажити невбудовані віддалені модулі AMD, які використовують плагін dojo / text, не вдасться через обмеження безпеки поперечного походження. (Вбудовані версії модулів AMD не впливають, оскільки виклики доджо / тексту усуваються система побудови.) " https://dojotoolkit.org/documentation/tutorials/1.10/cdn/

Один із способів завантаження локальних файлів - це використання їх у папці проекту замість папки проекту. Створіть одну папку під файлами прикладу проекту, подібним до того, як ми створюємо для зображень, і замініть розділ, де використовується повний локальний шлях, відмінний від шляху проекту, та використовуйте відносну URL-адресу файлу в папці проекту. Це працювало для мене

Для всіх ви MacOS... налаштуйте простий LaunchAgent, щоб увімкнути ці гламурні можливості у власній копії Chrome ...

Збережіть plist, назване ім’ям будь-якого ( launch.chrome.dev.mode.plistнаприклад,) ~/Library/LaunchAgentsіз подібним вмістом до ...

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

Він повинен запускатися при запуску .. але ви можете змусити це робити в будь-який час за допомогою термінальної команди

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

ТАДА! 😎 💁🏻 🙊 🙏🏾

• Встановіть локальний веб-сервер для Java, наприклад, Tomcat, для php можна використовувати лампу тощо
• Видаліть файл json у каталог загальнодоступних серверів додатків

• 

• Запустіть сервер додатків, і ви зможете отримати доступ до файлу з localhost

Неможливо завантажити статичні локальні файли (наприклад: svg) без сервера. Якщо на вашому пристрої встановлено NPM / YARN, ви можете налаштувати простий http-сервер за допомогою " http-сервера "

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

Або відкрийте термінал у папці проекту та введіть "hs". Він автоматично запустить живий сервер HTTP.

Для цього багато проблем, в моїй проблемі відсутній '/' приклад: jquery-1.10.2.js: 8720 XMLHttpRequest не може завантажити http: // localhost: xxxProduct / getList_tagLabels / Потрібно: http: // localhost: xxx / Product / getList_tagLabels /

Я сподіваюся, що це допоможе тим, хто стикається з цією проблемою.

Я також зміг відтворити це повідомлення про помилку під час використання тега прив’язки із наступним href:

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

У моєму випадку для отримання "курсору вказівника" використовувався тег, і подія насправді контролювалася деякою подією jQuery при натисканні. Я видалив href і додав клас, який застосовується:

cursor:pointer;

Для користувачів Linux Python:

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

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

У мене виникла ця проблема, коли я намагався обслуговувати .jsфайли file://. Моє рішення полягало в тому, щоб оновити сценарій збірки, щоб замінити <script src="...">теги <script>...</script>. Осьgulp підхід для цього:

1. запустити npm install --save-devв пакети gulp, gulp-inlineіdel .

2. Після створення gulpfile.jsкореневого каталогу додати наступний код (просто змінити шляхи до файлів на те, що підходить тобі):

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. Або запустіть gulp bundle-for-localабо оновіть свій сценарій збірки, щоб запустити його автоматично.

Ви можете ознайомитись з детальною проблемою та рішенням моєї справи тут .

кордова досягти цього. Я досі не можу зрозуміти, як зробила кордова. Він навіть не проходить черезInInceptRequest.

Пізніше я з’ясував, що ключем для завантаження будь-якого файлу з локального є: myWebView.getSettings (). SetAllowUniversalAccessFromFileURLs (true);

І коли ви хочете отримати доступ до будь-якого ресурсу http, веб-перегляд здійснить перевірку методом OPTIONS, який ви можете надати доступ через WebViewClient.shouldInterceptRequest шляхом повернення відповіді, а для наступного методу GET / POST ви можете просто повернути нуль.

спочатку закрийте всі екземпляри хрому.

після цього слідкуйте за цим.

Я використав цю команду на mac.

"/ Програми / Google Chrome.app/Contents/MacOS/Google Chrome" - дозволити-файл-доступ-з-файлів

Для вікон:

Як запустити html за допомогою Chrome у режимі "--allow-file-access-from-files"?

Переживав це, коли я завантажував сторінку для перегляду в режимі офлайн.

Я просто повинен був видалити integrity="*****"і crossorigin="anonymous"атрибути з усіх <link>і <script>тегів