Запросы с перекрестным происхождением поддерживаются только для HTTP, но не для нескольких доменов.

Я использую этот код для запроса AJAX:

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

Но из консоли Google Chrome JavaScript я продолжаю получать эту ошибку:

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.

Мне посчастливилось запустить Chrome со следующим переключателем:

--allow-file-access-from-files

В os x попробуйте (повторно введите тире, если вы копируете пасту):

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

На другом запуске * nix (не тестировалось)

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

или в окнах отредактируйте свойства ярлыка Chrome и добавьте переключатель, например

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

до конца "целевого" пути

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

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

Chrome и другие современные браузеры реализовали ограничения безопасности для запросов Cross Origin, что означает, что вы не можете загружать что-либо через file: ///, вам необходимо использовать протокол http: // всегда, даже локально - из-за политик Same Origin. Все просто, вам нужно будет смонтировать веб-сервер для запуска вашего проекта там.

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

Готово, удачного кодирования!

РЕДАКТИРОВАТЬ: в 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: // ваш_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 на :: порт 8000 (http: // [::]: 8000 /) ...

перейдите по своей ссылке: http://0.0.0.0:8000/

Наслаждаться :)