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

Question

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

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

Answer 1

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

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

Answer 2

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

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

Рубин

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

ruby -run -e httpd . -p 8080

PHP

Конечно, PHP также имеет свое решение.

php -S localhost:8000

Answer 3

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

--allow-file-access-from-files

Узнайте больше здесь.

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

Просто хотел показать это на случай, если есть другие с похожей проблемой.

Answer 5

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

Answer 6

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

1. Используя очень легкий npm пакет: установите live-сервер используя 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, ПРИМЕЧАНИЕ: НЕ используйте этот ярлык для регулярного просмотра.

Answer 7

Использование http:// или же https:// создать URL

ошибка: localhost:8080

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

Answer 8

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

Answer 9

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

python -m http.server

Answer 10

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

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

Answer 11

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

PS Даже IE_Edge работает отлично, на удивление!!

Answer 12

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

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

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

Answer 13

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

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.

Answer 14

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

Answer 15

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

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

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

Answer 16

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

Answer 17

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

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

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

Answer 18

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

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

Answer 19

Если вы настаиваете на запуске .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 или обновите сценарий сборки, чтобы он запускался автоматически.

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

Answer 20

Для всех вас 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!

Answer 21

Если вы ищете решение для хостинга Firebase, вы можете запустить

firebase serve --only hostingкоманда из интерфейса командной строки Firebase

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

Answer 22

Для пользователей Linux Python:

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

Answer 23

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

Answer 24

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

• 

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

Answer 25

URL-адрес должен быть таким:

       createUserURL = "http://www.localhost:3000/api/angular/users"

вместо:

       createUserURL = "localhost:3000/api/angular/users"

Answer 26

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

Answer 27

Попробуйте изменить номер порта .. у меня это сработало.

Answer 28

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

Я надеюсь, что это поможет тем, кто сталкивается с этой проблемой.

Answer 29

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

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

В моем случае для получения "указателя курсора" использовался тег, а событие фактически контролировалось каким-либо jQuery-событием click. Я удалил href и добавил класс, который применяется:

cursor:pointer;

Answer 30

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

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

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