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


113

Я получаю следующую ошибку:

XMLHttpRequest cannot load file:///C:/Users/richa.agiwal/Desktop/get/rm_Library/templates/template_viewSettings.html. Cross origin requests are only supported for HTTP. 

Я понимаю, что на этот вопрос уже был дан ответ, но я до сих пор не нашел решения своей проблемы. Я попытался запустить chrome.exe --allow-file-access-from-filesиз командной строки и переместил файл в локальную файловую систему, но все равно получаю ту же ошибку.

Я ценю любые предложения!


Может быть, здесь похоже! stackoverflow.com/questions/10752055/…
Ngô ấc Tuấn

Ответы:


155

Если вы делаете что-то вроде написания HTML и Javascript в редакторе кода на своем персональном компьютере и тестируете вывод в своем браузере, вы, вероятно, получите сообщения об ошибках о Cross Origin Requests. Ваш браузер будет отображать HTML и запускать Javascript, jQuery, angularJs в вашем браузере без необходимости настройки сервера. Но многие веб-браузеры запрограммированы на отслеживание межсайтовых атак и блокируют запросы. Вы же не хотите, чтобы кто-нибудь мог читать ваш жесткий диск из вашего веб-браузера. Вы можете создать полностью функциональную веб-страницу с помощью Notepad ++, который будет запускать Javascript и такие фреймворки, как jQuery и angularJs; и все протестировать, просто используя пункт меню Notepad ++,RUN, LAUNCH IN FIREFOX. Это хороший и простой способ начать создание веб-страницы, но когда вы начинаете создавать что-либо, кроме макета, CSS и простой навигации по страницам, вам понадобится локальный сервер, настроенный на вашем компьютере.

Вот несколько вариантов, которые я использую.

  1. Протестируйте свою веб-страницу локально в Firefox, а затем разверните ее на своем хосте.
  2. или: Запустите локальный сервер

Протестируйте в Firefox, разверните на хосте

  1. В настоящее время Firefox разрешает запросы Cross Origin из файлов, передаваемых с вашего жесткого диска.
  2. Ваш сайт веб-хостинга будет разрешать запросы к файлам в папках, как указано в файле манифеста.

Запустить локальный сервер

  • Запустите сервер на своем компьютере, например Apache или Python
  • Python не является сервером, но он будет запускать простой сервер

Запуск локального сервера с Python

Получите свой IP-адрес:

  • В Windows: откройте «Командную строку». Все программы, аксессуары, командная строка
  • Я всегда использую Command Promptкак Administrator. Щелкните правой кнопкой мыши по Command Promptпункту меню и найдитеRun As Administrator
  • Введите команду: ipconfigи нажмите Enter.
  • Ищите: IPv4-адрес. . . . . . . . 12.123.123.00
  • Есть веб-сайты, на которых также отображается ваш IP-адрес.

Если у вас нет Python, скачайте и установите его.

Используя «Командную строку», вы должны перейти в папку, где находятся файлы, которые вы хотите использовать в качестве веб-страницы.

  • Если вам нужно вернуться в каталог C: \ Root - введите cd /
  • введите cd Drive: \ Folder \ Folder \ etc, чтобы перейти в папку, где находится ваш .Html файл (или php и т. д.)
  • Проверить путь. введите: путь в командной строке. Вы должны увидеть путь к папке, в которой находится python. Например, если python находится в C: \ Python27, вы должны видеть этот адрес в перечисленных путях.
  • Если путь к каталогу Python не указан в пути, вы должны указать путь. введите: help path и нажмите Enter. Вы увидите подсказку для пути.
  • Введите что-то вроде: path c: \ python27% path%
  • % path% сохраняет все ваши текущие пути. Вы не хотите стирать все ваши текущие пути, просто добавьте новый путь.
  • Создайте новый путь ОТ папки, в которой вы хотите обслуживать файлы.
  • Запустите сервер Python: Тип: python -m SimpleHTTPServer portгде «порт» - это номер нужного порта, напримерpython -m SimpleHTTPServer 1337
  • Если вы оставите порт пустым, по умолчанию используется порт 8000.
  • Если сервер Python запустится успешно, вы увидите сообщение msg.

Запускайте веб-приложение локально

  • Открыть браузер
  • В адресной строке введите: http://your IP address:port
  • http://xxx.xxx.x.x:1337 или http://xx.xxx.xxx.xx:8000по умолчанию
  • Если сервер работает, вы увидите список ваших файлов в браузере.
  • Щелкните файл, который хотите обслужить, и он должен отобразиться.

Более продвинутые решения

  • Установите редактор кода, веб-сервер и другие интегрированные службы.

Вы можете установить Apache, PHP, Python, SQL, отладчики и т. Д. По отдельности на свой компьютер, а затем потратить много времени, пытаясь выяснить, как заставить их работать вместе, или искать решение, которое объединяет все эти вещи.

Мне нравится использовать XAMPP с IDE NetBeans. Вы также можете установить WAMP, который обеспечивает User Interfaceуправление и интеграцию Apache и других служб.


1
Если вы не знакомы с запуском команд из командной строки MSDOS, вы можете получить дополнительную информацию в Википедии: [ссылка] en.wikipedia.org/wiki/List_of_DOS_commands
Алан Уэллс

Есть ли способ решить эту проблему только с помощью Wamp? Я запускаю Wamp и все еще получаю это сообщение. Apache, php и mysql обновлены до
последней версии

К сожалению, я не использовал WAMP, и у меня нет ответа для вас. Возможно, задайте новый вопрос, относящийся к вашей настройке.
Алан Уэллс

Есть ли способ отключить проверку перекрестного происхождения или добавить к ней протокол file: //? Я работаю в мобильном веб-просмотре, который показывает file: // s, которые сопоставляются с ресурсами в apk, и я пытаюсь загрузить скрипт babel js, который внутренне преобразует файл <script type = "text / babel" src = ": // ... "> в XMLHttpRequest.
mtsvetkov 05

Неважно, исправил это, возясь с намерениями приложения и разрешив навигационные hrefs. На рабочем столе я добавил заголовки cors в Chrome для отладки.
mtsvetkov 05

91

Простое решение

Если вы работаете с чистыми файлами html / js / css.

Установите это небольшое серверное ( ссылка ) приложение в хроме. Откройте приложение и укажите местоположение файла в каталоге вашего проекта.

Перейти к URL-адресу, указанному в приложении.

Изменить: более умное решение с использованием Gulp

Шаг 1. Чтобы установить Gulp. Выполните следующую команду в своем терминале.

npm install gulp-cli -g
npm install gulp -D

Шаг 2: В каталоге вашего проекта создайте файл с именем gulpfile.js. Скопируйте в него следующий контент.

var gulp        = require('gulp');
var bs          = require('browser-sync').create();   

gulp.task('serve', [], () => {
        bs.init({
            server: {
               baseDir: "./",
            },
            port: 5000,
            reloadOnRestart: true,
            browser: "google chrome"
        });
        gulp.watch('./**/*', ['', bs.reload]);
});

Шаг 3: Установите плагин синхронизации браузера gulp. В том же каталоге, где находится gulpfile.js, выполните следующую команду

npm install browser-sync gulp --save-dev

Шаг 4: Запустите сервер. В том же каталоге, где находится gulpfile.js, выполните следующую команду

gulp serve

6
Фантастика! Ответ Сэнди исчерпывающий, но ваш ответ превосходит его по удобству «заставить его работать сейчас».
Holf

1
Гениально! Не нужно запоминать причудливые процедуры, чтобы CORS работал!
Стоян Беров

Отличное маленькое приложение. Спасибо :)
Марк

блестящее, лучшее и самое простое решение
firasKoubaa

1
Эта ссылка больше не доступна
gbade_

2

Эта ошибка возникает из-за того, что вы просто открываете html-документы прямо из браузера. Чтобы исправить это, вам нужно будет передать свой код с веб-сервера и получить к нему доступ на локальном хосте. Если у вас установлен Apache, используйте его для обслуживания файлов. Некоторые IDE имеют встроенные веб-серверы, такие как JetBrains IDE, Eclipse ...

Если у вас есть установка Node.Js, вы можете использовать http-сервер . Просто запустите, npm install http-server -gи вы сможете использовать его в терминале, как http-server C:\location\to\app. Кирилл Фукс


2

Чтобы добавить к подробному ответу Алана Уэллса, вот быстрое исправление

Запустить локальный сервер

вы можете обслуживать любую папку на вашем компьютере с помощью Serve

Сначала перейдите с помощью командной строки в папку, которую вы хотите обслуживать.

затем

npx i -g serve
serve

или если вы хотите протестировать Serve, загрузив его

npx serve

и это все! Вы можете просматривать свои файлы по адресу http: // localhost: 5000.

введите описание изображения здесь


1

Я столкнулся с этой ошибкой при локальном развертывании своего проекта веб-API и вызывал проект API только с указанным ниже URL-адресом:

localhost // myAPIProject

Поскольку в сообщении об ошибке указано, что это не http: //, я изменил URL-адрес и поставил префикс http, как указано ниже, и ошибка исчезла.

http: // локальный хост // myAPIProject


0

Если вы используете IDE Javascript WebStorm , вы можете просто открыть свой проект из WebStorm в своем браузере. WebStorm автоматически запустит сервер, и вы больше не получите ни одной из этих ошибок, потому что теперь вы обращаетесь к файлам с помощью разрешенных / поддерживаемых протоколов (HTTP).


0

В зависимости от ваших потребностей, но есть также быстрый способ временно проверить ваш (фиктивный) JSON, сохранив его на http://myjson.com . Скопируйте ссылку api и вставьте ее в свой код javascript. Виола! Когда вы хотите развернуть коды, вы не должны забывать изменить этот URL в своих кодах!


-2

Поместите папку вашего проекта в htdocs каталога Xampp. Запустите сервер Apache с помощью панели управления xampp, затем откройте браузер, перейдите в папку localhost / projectfolder, после чего он начнет работать.


Этот ответ неполный.
Уильям Данн,

привет, Уильям Данн, позвольте мне знать, чего не хватало, чтобы я мог улучшить свой ответ ..
Sunil KV

1
Вы предполагаете, что у него уже установлен XAMPP, что, похоже, не указано в исходном вопросе, и если вы предлагаете установить что-то новое, как правило, неплохо объяснить, почему и причину ошибки - особенно для тех, кто будет читать это в будущем.
Уильям Данн
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.