Прежде всего. Я хочу сказать несколько слов, чтобы объяснить, что я полностью осведомлен о том, что такое междоменная проблема и как с ней бороться (обычным js с jQuery, но не vue)
Вот случай:
Я хочу получить функции WFS (в формате xml) от некоторых геосерверов (других доменов), используя запрос HTTP GET . Понятно, что он будет заблокирован из-за той же политики происхождения.
Я использовал очень простой файл proxy.php, чтобы обойти это, и он работает довольно хорошо.
Файл proxy.php выглядит так:
<?php
$nix="";
$type=$_GET['requrl'];
if ($_GET['requrl'] != $nix) {
$file = file_get_contents($_GET['requrl']);
} else {
$file = "false type";
}
echo $file;
?>
Так что в основном я пишу в JS Ajax-вызов с помощью jQuery. который выглядит так:
jQuery.ajax(
type: "GET",
data: {
requrl: "www.example.com/WFS?service=wfs&request=GetCapabilities"
},
url: "proxy.php"
).done(function (response) {
// handle the response text/xml
console.log(response);
})
Старый способ работает хорошо, я посылаю "истинный" URL как requrl в файл php, php получает то, что я хочу, и возвращает его в ответ. Позже я могу передать ответ с помощью jQuery-ajax.
Реальная проблема:
Но теперь я перевожу все свое приложение в инфраструктуру vue.js. Теперь я использую vue-ресурс вместо jQuery-ajax .
vue-ресурс не сложен для понимания. Поэтому я делаю HTTP-запрос GET, как показано ниже:
this.$http.get('/static/proxy.php', {params: {requrl:"www.google.de"}}).then(response => {
// success
console.log("oh! success!");
}, response => {
// error
console.log("oh! error!");
});
Я поместил файл proxy.php в папку public / static, и vue-ресурс продолжает получать для меня содержимое файла proxy.php . Но не проходите через это и не возвращайте мне ответ.
Я проверил HTTP-запрос GET с помощью инструментов Firefox Dev, и он показывает мне, что запрос GET - 200 OK. Но ответ всегда является содержимым этого proxy.php. Похоже, php-файл не выполняет ту работу, которую я ожидал.
А вот ответ, который я получил от запроса GET vue-resource:
<?php $nix=""; $type=$_GET['requrl']; if ($_GET['requrl'] != $nix) { $file = file_get_contents($_GET['requrl']); } else { $file = "false type"; } echo $file; ?>
Я знаю, что причиной может быть сервер dev, потому что в старые времена на моем локальном сервере apache был установлен php, а теперь и vue.js. Я просто набираю npm run serve каждый раз, когда хочу запустить dev-сервер. Я не знаю, какой сервер dev я только что запустил и работает ли он с php.
Итак, я хотел бы спросить, как вы, ребята, имеете дело с vue-resource и php. Или, может быть, в vue.js есть лучший способ обойти междоменную проблему?
Вот среда разработки, которую я сейчас использую:
Проект создается с помощью vue.js и vue / cli 3 (содержит веб-пакет и т. Д.)
Используемый мной плагин vuetify и vue-resource
Для тех, кто может искать тот же вопрос в будущем. Я решил свой вопрос следующим образом:
Настройка сервера Apache, на котором установлен php (из-за этого я получил содержимое моего proxy.php У меня не было php, установленного на сервере dev, который запускается команда npm run serve, и поэтому она не сработала! )
Убедитесь, что вы включили CORS на вашем сервере apache! Потому что этот сервер apache будет работать на другом порту (например, 8888), а ваш dev-сервер для вашего приложения vue будет работать, например, на 8080 по умолчанию! И разные порты будут считаться также кросс-доменом! Так что обязательно включите CORS на вашем сервере Apache!
Направьте ваш HTTP-запрос GET на файл proxy.php на вашем сервере apache с помощью vue-resource, вот пример в приложении vue (мой сервер apache работает на порту 8888, файл proxy.php также показано в этом вопросе, здесь я получил свой собственный идентификатор с запросом GET на URL http://httpbin.org/ip):
this.$http.get('http://localhost:8888/proxy.php', {params: {requrl: "http://httpbin.org/ip"}}).then(response => {
// success
console.log("oh! success!");
console.log("success response: ", response);
}, response => {
// error
console.log("oh! error!")
console.log("error response: ", response);
});
Теперь вы успешно обходите Cross Domain!