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 дозволяє перехресно запрошувати запити файлів, що надходять з вашого жорсткого диска
2. Ваш веб-сайт хостингу надаватиме запити до файлів у папках, налаштованих файлом маніфесту

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

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

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

Отримайте свою IP-адресу:

• У Windows: відкрийте командний рядок. Усі програми, аксесуари, командний рядок
• Я завжди запускаю Command Promptяк Administrator. Клацніть правою кнопкою Command Promptмиші пункт меню і шукайтеRun As Administrator
• Введіть команду: ipconfigі натисніть Enter.
• Шукайте: IPv4 Address. . . . . . . . 12.123.123.00
• Є веб-сайти, на яких також буде відображатися ваша IP-адреса

Якщо у вас немає Python, завантажте та встановіть його.

Використовуючи командний рядок, ви повинні перейти до папки, у якій є файли, які ви хочете служити веб-сторінкою.

• Якщо вам потрібно повернутися до каталогу C: \ Root - введіть cd /
• введіть cd Drive: \ Folder \ Folder \ тощо, щоб перейти до папки, де знаходиться ваш файл .Html (або php тощо)
• Перевірте шлях. type: шлях у командному рядку. Ви повинні побачити шлях до папки, де знаходиться python. Наприклад, якщо python знаходиться в C: \ Python27, то ви повинні побачити цю адресу в списках шляхів.
• Якщо шлях до каталогу Python відсутній у шляху, потрібно встановити шлях. тип: довідковий шлях та натисніть Enter. Ви побачите допомогу для шляху.
• Введіть щось на кшталт: path c: \ python27% path%
• % path% зберігає всі ваші поточні шляхи. Ви не хочете викреслювати всі свої поточні контури, просто додайте новий шлях.
• Створіть новий шлях ВІД папки, куди потрібно подавати файли.
• Запустіть сервер Python: Введіть: наприклад, 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, налагоджувачі тощо все окремо на вашій машині, а потім витратити багато часу, намагаючись зрозуміти, як змусити їх працювати разом, або шукати рішення, яке поєднує всі ці речі.

Мені подобається використовувати 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-документи безпосередньо з браузера. Щоб виправити це, вам потрібно буде подати свій код із веб-сервера та отримати доступ до нього на localhost. Якщо у вас встановлена ​​програма Apache, використовуйте її для обслуговування своїх файлів. Деякі IDE мають вбудовані веб-сервери, як, наприклад, JetBrains IDE, Eclipse ...

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

Додайте до вичерпної відповіді Алана Уеллса ось швидке виправлення

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

ви можете обслуговувати будь-яку папку на своєму комп’ютері за допомогою сервісу

Спочатку перейдіть за допомогою командного рядка в папку, яку ви хочете обслуговувати.

Тоді

npx i -g serve
serve

або якщо ви хочете протестувати сервіс, завантажуючи його

npx serve

і це все! Ви можете переглянути свої файли за адресою http: // localhost: 5000

Я зіткнувся з цією помилкою, коли я локально розгорнув проект Web API, і я телефонував проект API лише за допомогою вказаної нижче URL-адреси:

localhost // myAPIProject

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

http: // localhost // myAPIProject

Якщо ви використовуєте WebStorm Javascript IDE , ви можете просто відкрити свій проект із WebStorm у своєму браузері. WebStorm автоматично запустить сервер, і ви більше не отримаєте жодної з цих помилок, оскільки тепер ви отримуєте доступ до файлів за допомогою дозволених / підтримуваних протоколів (HTTP).

Залежить від ваших потреб, але є також швидкий спосіб тимчасово перевірити ваш (фіктивний) JSON, зберігаючи свій JSON на http://myjson.com . Скопіюйте посилання api та вставте його у свій код JavaScript. Віола! Коли ви хочете розгорнути коди, ви не повинні забути змінити цю URL-адресу у своїх кодах!

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