Запросы между источниками поддерживаются только для HTTP, но это не кросс-домен

Question

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

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

Answer 1

Мне повезло, запустив 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

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

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

в конец «цели»путь

Answer 2

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

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

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

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

Однако для более ленивых есть более простое и легкое решение.Вы можете использовать Python's 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

Answer 3

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

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

, чтобы прочитать что-то вроде:

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

, и начальная страница запроса также должна быть сделана через http.

Answer 4

Я получал ту же ошибку при попытке загрузить просто 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, который пытались загрузить

Answer 5

Если у вас установлен 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

Answer 6

Так работает лучше всего.Убедитесь, что оба файла находятся на сервере.При вызове 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);
                            }
                        });
                    }
                });
            });