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

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

103
google-chrome security

7 ответов

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

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

    148

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

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

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

    Goto url, показанный в приложении.

    Edit: умнее решение с помощью 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.Яш присутствует, выполните следующую команду

    npm install browser-sync gulp --save-dev

    Шаг 4: запустить сервер. Внутри того же каталога, где gulpfile.Яш присутствует, выполните следующую команду

    gulp serve
    87

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

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

    2

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

    localhost / / myAPIProject

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

    http://localhost//myAPIProject

    1

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

    0

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

    0

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

    -2