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

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

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

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

Если вы делаете что-то вроде написания 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 и других служб.

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

Если вы работаете с чистыми файлами 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

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

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

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

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

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

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

затем

npx i -g serve
serve

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

npx serve

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

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

localhost // myAPIProject

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

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

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

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

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