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

Как я могу решить эту проблему?

6 ответов

Решение

Вам нужно запустить веб-сервер и сделать запрос get к URI на этом сервере, а не делать запрос get в файл; например, изменить строку:

    $.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 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, что означает, что вы не можете ничего загружать через file:///, вам необходимо постоянно использовать протокол http://, даже локально - из-за политик Same Origin. Все просто, вам нужно смонтировать веб-сервер, чтобы запустить там свой проект.

Это не конец света, и существует множество решений, в том числе старый добрый Apache (с VirtualHosts, если вы запускаете несколько других проектов), node.js с Express, сервер Ruby и т. Д. Или просто изменение вашего настройки браузера.

Однако для ленивых есть более простое и легкое решение. Вы можете использовать Python's SimpleHTTPServer. Он поставляется в комплекте с Python, поэтому вам не нужно ничего устанавливать или настраивать!

Например, перейдите в каталог вашего проекта

1 компакт-диск / 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

  1. Идти к 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);
                            }
                        });
                    }
                });
            });

Для всех пользователей Python:

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

cd projectFoder

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

python -m http.server 8000

Обслуживание HTTP на:: порт 8000 (http://[::]:8000/) ...

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

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

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).

Другие вопросы по тегам