Запити між походженнями підтримуються лише для HTTP, але це не міждомен

Я використовую цей код, щоб зробити запит AJAX:

$("#userBarSignup").click(function(){
    $.get("C:/xampp/htdocs/webname/resources/templates/signup.php",
        {/*params*/},
        function(response){
            $("#signup").html("TEST");
            $("#signup").html(response);
        },
        "html");

Але з консолі JavaScript Google Chrome я постійно отримую цю помилку:

XMLHttpRequest не може завантажити файл: /// C: /xampp/htdocs/webname/resources/templates/signup.php. Запити на перехресне походження підтримуються лише для HTTP.

Проблема полягає в тому, що файл signup.php розміщений на моєму локальному веб-сервері, звідки запущений весь веб-сайт, тому він не є міждоменним.

Як я можу вирішити цю проблему?

Вам потрібно фактично запустити веб-сервер і зробити запит на отримання URI на цьому сервері, а не робити запит на отримання файлу; наприклад, змінити рядок:

    $.get("C:/xampp/htdocs/webname/resources/templates/signup.php",

прочитати щось на зразок:

    $.get("http://localhost/resources/templates/signup.php",

а початкову сторінку запиту потрібно також зробити через http.

Мені пощастило запустити хром з таким перемикачем:

--allow-file-access-from-files

На x x спробуйте (повторно введіть тире, якщо скопіюєте вставку):

open -a 'Google Chrome' --args -allow-file-access-from-files

На іншому * nix run (не перевірено)

 google-chrome  --allow-file-access-from-files

або у вікнах відредагуйте властивості ярлика chrome та додайте перемикач, наприклад

 C:\ ... \Application\chrome.exe --allow-file-access-from-files

до кінця "цільового" шляху

Якщо ви працюєте над невеликим інтерфейсним проектом і хочете його протестувати локально, ви, як правило, відкриваєте його, вказуючи локальний каталог у веб-браузері, наприклад, вводячи файл: /// home / erick / mysuperproject / index .html у рядку URL-адреси. Однак якщо ваш сайт намагається завантажити ресурси, навіть якщо вони розміщені у вашому локальному каталозі, ви можете побачити такі застереження:

XMLHttpRequest не може завантажити файл: ///home/erick/mysuperproject/mylibrary.js. Запити на перехресне походження підтримуються лише для HTTP.

Chrome та інші сучасні браузери запровадили обмеження безпеки для запитів Cross Origin Request, що означає, що ви не можете нічого завантажувати через файл: ///, вам потрібно постійно використовувати протокол http: //, навіть локально - завдяки політикам того самого походження. Як просто це, вам потрібно змонтувати веб-сервер, щоб запустити там свій проект.

Це не кінець світу, і тут є безліч рішень, включаючи старий добрий Apache (з VirtualHosts, якщо у вас кілька інших проектів), node.js із express, сервер Ruby тощо або просто модифікуючи ваш налаштування браузера.

Однак є більш просте і легке рішення для ледачих. Ви можете використовувати Python SimpleHTTPServer. Він поставляється вже в комплекті з python, тому вам зовсім не потрібно нічого встановлювати чи налаштовувати!

Так, наприклад, компакт-диск до каталогу вашого проекту

1 cd / home / erick / mysuperproject, а потім просто використовуйте

1 python -m SimpleHTTPServer І все, ви побачите це повідомлення у своєму терміналі

1 Обслуговування HTTP через порт 0.0.0.0 8000 ... Тож тепер ви можете повернутися до свого браузера та відвідати http://0.0.0.0:8000 всі файли каталогів, що там обслуговуються. Ви можете налаштувати порт та інші речі, просто перегляньте документацію. Але цей просто фокус працює для мене, коли я поспішаю протестувати нову бібліотеку або виробити нову ідею.

Ось, щасливе кодування!

EDIT: У Python 3+ SimpleHTTPServer замінено на http.server. Отже, у Python 3.3, наприклад, наступна команда є еквівалентною:

python -m http.server 8000

Я отримував ту ж помилку під час спроби завантажити просто HTML-файли, які використовували дані JSON для заповнення сторінки, тому для вирішення проблеми я використовував використано node.js та express. Якщо у вас не встановлено вузол, спочатку потрібно встановити вузол .

1. Встановити експрес npm install express

2. Створіть файл server.js у кореневій папці вашого проекту, в моєму випадку на одну папку над файлами, які я хотів на сервері

3. Помістіть щось на зразок наступного у файл server.js і прочитайте про це на сайті express gihub:

   var express = require('express');
   var app = express();
   var path = require('path');
   
   // __dirname will use the current path from where you run this file 
   app.use(express.static(__dirname));
   app.use(express.static(path.join(__dirname, '/FOLDERTOHTMLFILESTOSERVER')));
   
   app.listen(8000);
   console.log('Listening on port 8000');
   

4. Після того, як ви зберегли server.js, ви можете запустити сервер, використовуючи:

node server.js

5. Перейдіть до, http://localhost:8000/FILENAMEі ви побачите файл HTML, який ви намагалися завантажити

Якщо у вас встановлений nodejs, ви можете завантажити та встановити сервер за допомогою командного рядка:

npm install -g http-server

Змініть каталоги на каталог, з якого ви хочете обслуговувати файли:

$ cd ~/projects/angular/current_project 

Запустіть сервер:

$ http-server 

який видасть повідомлення Запуск http-сервера, що обслуговується на:

Доступно на: http: // your_ip: 8080 та http://127.0.0.1:8080

Це дозволяє використовувати URL-адреси у вашому браузері, як

http: // your_ip: 8080 / index.html

Це найкраще працює таким чином. Переконайтеся, що обидва файли знаходяться на сервері. Викликаючи сторінку html, використовуйте веб-адресу, наприклад:, http:://localhost/myhtmlfile.htmlа не C::///users/myhtmlfile.html,. Зробіть також, що URL-адреса, передана json, є веб-адресою, як зазначено нижче:

$(function(){
                $('#typeahead').typeahead({
                    source: function(query, process){
                        $.ajax({
                            url: 'http://localhost:2222/bootstrap/source.php',
                            type: 'POST',
                            data: 'query=' +query,
                            dataType: 'JSON',
                            async: true,
                            success: function(data){
                                process(data);
                            }
                        });
                    }
                });
            });

REM kill all existing instance of chrome 
taskkill /F /IM chrome.exe /T
REM directory path where chrome.exe is located
set chromeLocation="C:\Program Files (x86)\Google\Chrome\Application"
cd %chromeLocation%
cd c:
start chrome.exe --allow-file-access-from-files

1. змінити шлях chromeLocation на свій.

2. зберегти вище як файл .bat.

3. перетягніть файл на створений пакетний файл. (chrome дає можливість відновити сторінки, хоча, якщо у вас є сторінки, просто натисніть "Відновити", і це буде працювати).

Ви також можете запустити сервер без python за допомогою інтерпретатора php.

Наприклад:

cd /your/path/to/website/root
php -S localhost:8000

Це може бути корисно, якщо вам потрібна альтернатива npm, оскільки утиліта php попередньо інстальована на деяких ОС '(включаючи Mac).

Для всіх користувачів python:

Просто перейдіть до папки призначення в терміналі.

cd projectFoder

потім запустіть HTTP-сервер для Python3 +:

python -m http.server 8000

Обслуговування HTTP на :: port 8000 (http: // [::]: 8000 /) ...

перейдіть за своїм посиланням: http://0.0.0.0:8000/

Насолоджуйтесь :)