jquery — как использовать vue-resource и proxy.php для решения междоменной проблемы

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

Вью-ресурс не сложно понять. Поэтому я делаю 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 в общую / статическую папку, а 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, потому что в старые времена у меня был установлен php на моем локальном сервере apache, а теперь с vue.js. Я просто набираю Npm Run служить каждый раз, когда я хочу запустить сервер разработки. Я не знаю, какой сервер dev я только что запустил и работает ли он с php.

Поэтому я хотел бы спросить, как вы, ребята, имеете дело с vue-resource и php. Или, может быть, в vue.js есть лучший способ обойти междоменную проблему?

Вот среда разработки, которую я сейчас использую:
Проект создается с помощью vue.js и vue / cli 3 (содержит веб-пакет и т. Д.)
Используемый мной плагин vuetify и vue-resource

Для тех, кто может искать тот же вопрос в будущем. Я решил свой вопрос следующим образом:

1. Настройте сервер Apache, на котором установлен php (из-за этого я получил содержимое моего proxy.php У меня не был установлен php на сервере dev, который запускается командой npm run serve, и поэтому он не работал!)

2. Убедитесь, что вы включите CORS на вашем сервере Apache! Потому что этот сервер apache будет работать на другом порту (например, 8888), а ваш dev-сервер для вашего приложения vue будет работать, например, на 8080 по умолчанию! И разные порты будут считаться также кросс-доменом! Поэтому убедитесь, что CORS включен на вашем сервере Apache!

3. Направьте ваш 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);
   });
   

4. Теперь вы успешно обходите Cross Domain!