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

88

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

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

javascript 
— сианноне
источник
5
Вы пробовали использовать HTTP-URL вместо локального пути?
— Эдвард Томсон,
1
Я бы предложил использовать полный URL-адрес
— Доминик Грин
2
@EdwardThomson Это сработало! Но теперь мне нужно установить allow_url_include = Onконфигурацию моего сервера.
— siannone
Возможный дубликат «Запросы

Ответы:

76

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

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

читать что-то вроде:

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

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

— Питеш
источник
Это сработало как шарм. Теперь мне нужно установить allow_url_include = Onконфигурацию моего сервера. Могу ли я безопасно включить его, или это вызовет некоторые проблемы с безопасностью?
— siannone
$ .Get фактически выдается в контексте javascript веб-браузера, поэтому этот файл должен иметь ссылку на URL - код, написанный на php, все еще может ссылаться на локальные файлы без проблем
— Питеш
44
В качестве альтернативы есть решение Python: (1) перейдите в консоль к папке, (2) введите python -m SimpleHTTPServer 8888, затем (3) перейдите в браузер кhttp://localhost:8888/
— геотеория
+1 это очень помогло решить мою проблему. Большое спасибо :)
— Praveen
5
Примечание для пользователей Python 3: используйтеpython -m http.server 8888
— Jelle Fresen
113

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

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

— Prauchfuss
источник
7
Работает в Google Chrome (по крайней мере , по состоянию на v24) , в принципе, но учтите , что в OS X вы должны ссылаться на него следующим образом : open -a 'Google Chrome' --args —allow-file-access-from-files. Также обратите внимание: если вы указываете URL-адрес на основе file: // (а не путь в файловой системе), обязательно используйте file://localhost/...вместо file:///....
— mklement0
6
В прошлый раз, когда я пытался сделать это в Windows, описанный выше метод не работал. В итоге мне пришлось запускать Chrome из командной строки DOS с переключателем, следующим за ... Неидеально, но работоспособно.
— Prauchfuss
Отлично работает в Linux.
— user1205577
Прекрасно работает на OS X Yosemite 10.10.2 и Chrome версии 41.0.2272.89 (64-бит).
— The Dude
86

Если вы работаете над небольшим интерфейсным проектом и хотите протестировать его локально, вы обычно открываете его, указывая свой локальный каталог в веб-браузере, например, вводя 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
— Прамод Алагамбхат
источник
5
Ленивое решение потрясающее. Очень просто, больше ничего делать не нужно.
— Нико
эквивалент существует также в node.js: simple-http-server
— StackHola
В Windows 8.1 вам все равно придется устанавливать Python, не так ли?
— J86
Я использую Xampp в Windows, это просто, хотя я бы порекомендовал использовать узел, также не забудьте разблокировать порт 80 в скайпе, чтобы сервер мог работать,
— Тимо Хуовинен,
10

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

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

— Рахул Редди
источник
1

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

— YJDev
источник
0

Вы также можете запустить сервер без python с помощью интерпретатора php.

Например:

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

Это может быть полезно, если вам нужна альтернатива npm, поскольку утилита php предустановлена ​​в некоторых ОС (включая Mac).

— Пранав Касетти
источник
0

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

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

cd projectFoder

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

python -m http.server 8000

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

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

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

— Шиваншу Кумар
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.