Запросы между источниками поддерживаются только для 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 для решения проблемы. Если у вас нет установленного узла, вам нужно сначала установить узел.
Установить экспресс
npm install express
Создайте файл server.js в корневой папке вашего проекта, в моем случае на одну папку выше файлов, которые я хотел на сервере
Поместите что-то вроде следующего в файл 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');
После сохранения server.js вы можете запустить сервер, используя:
node server.js
- Идти к
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 в вашем браузере, как
Лучше всего так работает. Убедитесь, что оба файла находятся на сервере. При вызове 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
измените путь chromeLocation на свой.
сохраните выше как файл.bat.
перетащите файл в созданный вами командный файл. (Chrome действительно дает возможность восстановления страниц, поэтому, если у вас есть открытые страницы, просто нажмите восстановить, и он будет работать).
Вы также можете запустить сервер без python с помощью интерпретатора php.
Например:
cd /your/path/to/website/root
php -S localhost:8000
Это может быть полезно, если вам нужна альтернатива npm, поскольку утилита php предустановлена в некоторых ОС (включая Mac).