«Запросы перекрестного происхождения поддерживаются только для 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

Вот несколько вариантов быстрого раскрутки локального веб-сервера, чтобы ваш браузер отображал локальные файлы.

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

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

Это раскручивает Node.js httpd, который обслуживает файлы в вашем каталоге как статические файлы, доступные из http://localhost:8080

Рубин

Если вы предпочитаете язык Ruby ... боги Ruby говорят, что это также работает:

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пакета : Установите live-server с помощью npm install -g live-server. Затем перейдите в этот каталог, откройте терминал, введите live-serverи нажмите Enter, страница будет обслуживаться по адресу localhost:8080. БОНУС: Он также поддерживает горячую перезагрузку по умолчанию.
2. Использование облегченного приложения Google Chrome , разработанного компанией Google : установите приложение, затем перейдите на вкладку приложений в Chrome и откройте приложение. В приложении укажите его на нужную папку. Ваша страница будет обслуживаться!
3. Изменение ярлыка Chrome в Windows : создайте ярлык браузера 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://....

РЕДАКТИРОВАТЬ

Нет необходимости иметь .htmlфайл. Вы можете запустить Live Server с помощью ярлыков.

Нажмите, (alt+L, alt+O)чтобы открыть сервер и (alt+L, alt+C)остановить сервер. [На MAC, cmd+L, cmd+Oи cmd+L, cmd+C]

Надеюсь, это поможет кому-то :)

Я получал именно эту ошибку при загрузке файла HTML в браузере, который использовал файл JSON из локального каталога. В моем случае я смог решить эту проблему, создав простой сервер узлов, который позволял сервировать статический контент. Я оставил код для этого в этом другом ответе .

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

Вот тот, который очень прост в настройке и запуске:

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 не затрагиваются, поскольку вызовы dojo / text устраняются система сборки.) " 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

TADA! 😎 💁🏻 🙊 🙏🏾

• Установите локальный веб-сервер для Java, например Tomcat, для PHP вы можете использовать лампу и т. Д.
• Перетащите файл json в общедоступный каталог сервера приложений.

• 

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

Невозможно загрузить статические локальные файлы (например, svg) без сервера. Если у вас есть NPM / ПРЯЖА установлена в вашем компьютере, вы можете настроить простой 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 при событии click. Я удалил 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или обновите сценарий сборки, чтобы запустить его автоматически.

Вы можете увидеть подробную проблему и решение для моего случая здесь .

Кордова добиться этого. Я до сих пор не могу понять, как сделал Кордова. Это даже не проходит следуетInterceptRequest.

Позже я узнал, что ключ для загрузки любого файла из локального: myWebView.getSettings (). SetAllowUniversalAccessFromFileURLs (true);

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

Сначала закройте все экземпляры хрома.

после этого следуйте этому.

Я использовал эту команду на Mac.

"/ Applications / Google Chrome.app/Contents/MacOS/Google Chrome" --allow-file-access-from-files

Для окон:

Как запустить HTML с помощью Chrome в режиме «--allow-file-access-from-files»?

Испытал это, когда я скачал страницу для просмотра в автономном режиме.

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