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

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

Я получаю ошибку "Cross origin requests are only supported for HTTP.", но я не знаю, что ее вызывает, и как ее исправить.

Ответы

Ответ 1

Мой хрустальный шар говорит, что вы загружаете модель, используя 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), они рассматриваются как разные источники.

Ответ 2

Просто чтобы быть явным - Да, ошибка говорит, что вы не можете указывать свой браузер непосредственно в file://some/path/some.html

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

Python 2

Если у вас установлен Python...

Измените каталог в папку, где находится файл some.html или файл (ы), используя команду cd/path/to/your/folder
Запустите веб-сервер Python с помощью команды python -m SimpleHTTPServer

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

Вы можете использовать настраиваемый порт python -m SimpleHTTPServer 9000 дает вам ссылку: http://localhost:9000

Этот подход встроен в любую установку Python.

Python 3

python3 -m http.server те же действия, но используйте следующую команду вместо python3 -m http.server

Node.js

Кроме того, если вы требуете более гибкой настройки и уже используете nodejs...

Установите http-server, набрав npm install -g http-server
Перейдите в рабочий каталог, где живет ваш some.html
Запустите свой 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

Ответ 3

В Chrome вы можете использовать этот флаг:

--allow-file-access-from-files

Подробнее здесь.

Ответ 4

Подходим к этому сегодня.

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

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:// во втором фрагменте кода.

Просто хотел поместить это там, если есть другие похожие проблемы.

Ответ 5

Просто измените url на http://localhost вместо localhost. Если вы откроете файл html из локального, вы должны создать локальный сервер для работы с этим html файлом, самый простой способ - Web Server for Chrome. Это устранит проблему.

Ответ 6

В Android-приложении — например, чтобы позволить JavaScript иметь доступ к активам через file:///android_asset/ — используйте setAllowFileAccessFromFileURLs(true) на WebSettings, который вы получаете от вызова getSettings() на WebView.

Ответ 7

Простой Node.js Решение

1) установить http-сервер: npm install http-server -g
2) запустить: http-server C:\location\to\appшаг 2 выйдет так:

Starting up http-server, serving ./
Available on:
http://127.0.0.1:8080
http://192.168.0.104:8080

Теперь у вас работает локальный сервер. Вы можете получить доступ к своему приложению через URL-адрес, предоставленный шагом 2

Ответ 8

Используйте http:// или https:// для создания URL

ошибка: localhost:8080

решение: http://localhost:8080

Ответ 9

Для тех, кто в Windows без Python или Node.js, есть еще легкое решение: Mongoose.

Все, что вы делаете, это перетащить исполняемый файл туда, где должен быть корень сервера, и запустить его. На панели задач появится значок, и он будет перемещаться по серверу в браузере по умолчанию.

Кроме того, Z-WAMP - это 100% портативный WAMP, который работает в одной папке, это потрясающе. Это вариант, если вам нужен быстрый сервер PHP и MySQL.

Ответ 10

Я собираюсь перечислить 3 различных подхода для решения этой проблемы:

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

Ответ 11

Если вы используете Mozilla Firefox, он будет работать, как и ожидалось, без каких-либо проблем;

PS Удивительно, но IntenetExplorer_Edge работает абсолютно отлично !!!

Ответ 12

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

python -m http.server

Ответ 13

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

Ответ 14

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

Здесь очень простая настройка и запуск:

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

Ответ 15

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

Перейдите по адресу: https://nodejs.org/en/download/. Установите nodejs.
Установите http-server, выполнив команду из командной строки npm install -g http-server.
Перейдите в рабочий каталог, где находится index.html/yoursome.html.
Запустите свой http-сервер, запустив команду http-server -c-1

Откройте веб-браузер для http://localhost:8080 или http://localhost:8080/yoursome.html - в зависимости от вашего имени файла html.

Ответ 16

Он просто говорит, что приложение должно запускаться на веб-сервере. У меня была такая же проблема с хром, я начал tomcat и перенесла туда свое приложение, и оно сработало.

Ответ 17

Простое решение для тех, кто использует 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]

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

Ответ 18

э. Я только что нашел некоторые официальные слова: "Попытка загрузить незастроенные удаленные модули AMD, использующие плагин dojo/text, завершится сбоем из-за ограничений безопасности, связанных с перекрестными ошибками (встроенные версии модулей AMD не затронуты, поскольку вызовы dojo/текст устраняется системой сборки.)" https://dojotoolkit.org/documentation/tutorials/1.10/cdn/

Ответ 19

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

Ответ 20

Для всех y'all на 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! 😎 💁🏻 🙊 🙏🏾

Ответ 21

Установите локальный веб-сервер для java, например Tomcat, для php вы можете использовать лампу и т.д.
Отбросить json файл в общедоступном каталоге сервера приложений
Запустите сервер приложений, и вы должны иметь доступ к файлу с локального хоста

Ответ 22

Я также смог воссоздать это сообщение об ошибке при использовании тега привязки со следующим href:

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

Ответ 23

Невозможно загрузить статические локальные файлы (например: svg) без сервера. Если на вашем компьютере установлен NPM/YARN, вы можете настроить простой HTTP-сервер, используя " http-server ",

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

Или откройте терминал в этой папке проекта и введите "hs". Он автоматически запускает HTTP-сервер.

Ответ 24

Многие проблемы для этого, с моей проблемой отсутствует пример "/": jquery-1.10.2.js: 8720 XMLHttpRequest не может загрузить http://localhost:xxxProduct/getList_tagLabels/ Это должно быть: http://localhost:xxx/Product/getList_tagLabels/

Я надеюсь, что эта помощь поможет вам решить эту проблему.