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

Ответ 1

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

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

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

Тест на Firefox, развертывание на хост

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

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

• Запустите сервер на вашем компьютере, например 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 и т.д.)
• Проверьте путь. type: path в командной строке. Вы должны увидеть путь к папке, где находится python. Например, если python находится в C:\Python27, вы должны увидеть этот адрес в перечисленных путях.
• Если путь к каталогу Python отсутствует в пути, вы должны установить путь. введите: help path и нажмите Enter. Вы увидите помощь для пути.
• Введите что-то вроде: path c:\python27% path%
• % path% сохраняет все ваши текущие пути. Вы не хотите уничтожать все ваши текущие пути, просто добавьте новый путь.
• Создайте новый путь из папки, где вы хотите обслуживать файлы.
• Запустите Python Server: Тип: python -m SimpleHTTPServer port Где "порт" - это номер требуемого порта, например python -m SimpleHTTPServer 1337
• Если вы оставите порт пустым, по умолчанию он будет иметь порт 8000
• Если сервер Python запускается успешно, вы увидите сообщение.

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

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

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

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

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

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

Ответ 2

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

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

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

Перейти на 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

Ответ 3

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

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

Ответ 4

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

локальный//myAPIProject

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

http://localhost//myAPIProject

Ответ 5

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

Ответ 6

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

Ответ 7

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

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

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

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

затем

npx i -g serve
serve

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

npx serve

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

Ответ 8

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

Ответ 9

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