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

797

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

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

Corazza
источник
23
Вы пытаетесь сделать это локально?
Войтек
11
Вам нужно использовать localhost, даже если его локальный файл
Нейл
22
Но это не кросс-домен!
Корацца
21
Если вы используете Chrome, вам может помочь запуск его из терминала с параметром --allow-file-access-from-files.
nickiaconis
12
Да, это не совсем кросс-домен, когда файл находится в той же папке, что и веб-страница, теперь это так ... Я обнаружил, что если вы используете Firefox вместо Chrome, проблема исчезнет.
Sphinxxx

Ответы:

790

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

Андреас Вонг
источник
7
Да, я пытаюсь сделать это с помощью file://, но я не понимаю, почему это разрешено. Ну, я устанавливаю Lampp, я думаю ...
Corazza
151
Представьте себе, если это разрешено, и веб-приложение, в котором автор страницы использует что-то подобное, load('file://C:/users/user/supersecret.doc')а затем загружает контент на свой сервер, используя ajax и т. Д.
Андреас Вонг
11
к сожалению, политика разработана для всех случаев, а не только для вас :(, так что вы должны терпеть
Андреас Вонг
28
В вики-сайте GitHub есть страница на эту тему: github.com/mrdoob/three.js/wiki/How-to-run-things-locally
Фелипе Лима,
29
Вы также можете использовать параметр --allow-file-access-from-files в chrome. За мой ответ здесь: stackoverflow.com/questions/8449716/…
prauchfuss
610

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

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

Python 2

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

  1. Перейдите в папку, в которой существует ваш файл some.htmlили файлы, используя командуcd /path/to/your/folder

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

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

  1. Вы можете использовать пользовательский порт, 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
Скотт Стенсленд
источник
3
Это сэкономило мне кучу времени, спасибо. В моей установке Python не было модуля SimpleHTTPServer, но инструкции узла работали как чудо.
ЛукиП
3
В ответ на комментарий LukeP, в python 2.7 команда работает в соответствии с инструкциями $ python -m SimpleHTTPServer, которые выдают сообщение: Serving HTTP on 0.0.0.0 port 8000 ...Если вы написали неправильное имя модуля, например, $ python -m SimpleHttpServerтогда вы получите сообщение об ошибке. No module named SimpleHttpServerВы получите похожее сообщение об ошибке, если у вас есть python3. установлен (v. python 2.7). Вы можете проверить свою версию питона с помощью команды: $ python --version. Вы также можете указать порт для прослушивания следующим образом:$ python -m SimpleHTTPServer 3333
7
1
Сервер python обслуживает файлы из каталога, в котором вы запускаете сервер. Так что, если файлы, которые вы хотите обслуживать, находятся в / Users / 7stud / angular_projects / 1app, то запустите сервер в этом каталоге, например $ cd ~/angular_projects/1app, затем $ python -m SimpleHTTPServer. В вашем браузере введите URL http://localhost:8000/index.html. Вы также можете запросить файлы в подкаталогах каталога, в котором вы запустили сервер, напримерhttp://localhost:8000/subdir/hello.html
7stud
2
Я слышал, что Python простой и мощный, как и язык "X", но это нелепо! Не нужно устанавливать XAMPP или настраивать простой http-сервер js с узлом для обслуживания статических файлов - одна команда и бум! Большое спасибо, экономит много времени и хлопот.
RD
2
КЛАССНО! - для Python в Windows используйте: python -m http.server 8080 ... или любой другой порт, который вы хотите, и когда вы хотите выйти из него, просто ctrl-c.
Кристофер
162

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

--allow-file-access-from-files

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

Сообщество
источник
11
@ Blairg23, имейте в виду, что это решение требует перезапуска всех экземпляров Chrome.exe, чтобы оно заработало
Алекс Клаус
4
Пожалуйста, объясните, как использовать его в Chrome.
Ришабх Аграри
@Priya Не следует этого делать
Сурадж Джейн
Я бы предложил использовать Chromium только для локальной отладки (начиная с флага --allow-file-access-from-files). Это означает использование Chrome для обычного просмотра веб-страниц и использование Chromium в качестве приложения по умолчанию для файла HTML.
Алан Чжилян Фэн
Обратите внимание, что fetch()это все равно отрицает. Вы должны использовать XMLHttpRequestкаким-либо образом
Hashbrown
63

Наткнулся на это сегодня.

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

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

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

Джеймс Харрингтон
источник
41

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

финн
источник
5
+1 для Web Server for Chromeссылки на приложение - это, безусловно, самое простое и чистое решение для временной настройки httpd для Chrome IMO
Это спасло меня. Точное решение
Сурия
18

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

CommonsWare
источник
Brilliant! Мы как раз собирались переписать методы для внедрения JSON в переменные ... но это работает! webView.getSettings () setAllowFileAccessFromFileURLs (истина).
WallyHale
15

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

ошибка :localhost:8080

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

KARTHIKEYAN.A
источник
14

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

python -m http.server
Ридха Реззаг
источник
13

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

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

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

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

БРИКа
источник
Если вы установили php или установили, вы можете запустить сервер в своей папке: php.net/manual/es/features.commandline.webserver.php
jechaviz
12

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

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

Яш П Шах
источник
1
уже нет. firefox и т. е. оба блокируют запрос cors для меня.
Баахубали
Кроме того, это не очень хорошая вещь для доступа к небезопасным страницам: D
csomakk
6

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

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

Омюркан Ченгиз
источник
4

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

thehme
источник
4

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

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

https://www.npmjs.com/package/tiny-server
Денис М.
источник
4

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

  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.

TarmoPikaro
источник
3

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

Энаят
источник
1

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

YUIOP QWERT
источник
1

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

Нага Сай А
источник
1

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

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

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

Фред Ондики
источник
1

Невозможно загрузить статические локальные файлы (например, svg) без сервера. Если у вас есть NPM / ПРЯЖА установлена в вашем компьютере, вы можете настроить простой HTTP - сервер , используя « HTTP-сервер »

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

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

Суджит С
источник
двойной ответ
Скотт Стенслэнд
0

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

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

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

cursor:pointer;

mgilberties
источник
0

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

import webbrowser
browser = webbrowser.get('google-chrome --allow-file-access-from-files %s')
browser.open(url)
Даниэль Браун
источник
Нет ли причины, почему google-chrome --allow-file-access-from-files <url>бы не работать и быть более кратким?
agupta231
@ agupta231 Модуль webbrowser имеет аргументы, которые позволяют вам различные виды «открытия», например. открыть в текущей вкладке, новой вкладке, новом окне и т. д.
Даниэль Браун
0

Если вы настаиваете на том, чтобы запускать .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'))
  1. Запустите gulp bundle-for-localили обновите сценарий сборки, чтобы запустить его автоматически.

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

noamyg
источник
-1

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

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

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

user1462586
источник
-1

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

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

aphoe
источник