Odtnhj

First of all. I want to take a few words to explain that I am fully aware of what Cross-domain problem is and how to deal with it (in plain js with jQuery, but not in vue)

Here is the case:
I want to get the WFS features (as xml) from some of the geoserver (other domains) using the HTTP GET request. It is clear that it will be blocked because of the same origin policy.

I used to use a very simple proxy.php file to go around this and it works pretty well.

The proxy.php file is like this:

<?php
$nix="";
$type=$_GET['requrl'];
if ($_GET['requrl'] != $nix) 
 $file = file_get_contents($_GET['requrl']);
 else 
 $file = "false type";

echo $file;
?>

So basically I write in JS an Ajax-call with jQuery. which looks like this:

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);
)

The old way works well, I send the "true" url as requrl to the php file, the php get what I want for me and return it as response. So I can later hanlde the response with the jQuery-ajax.

The real problem:

But now I am moving my whole app to the vue.js framework. So I am now using vue-resource instead of the jQuery-ajax.

The vue-resource is not hard to understand. So I make the HTTP GET request as below:

this.$http.get('/static/proxy.php', params: requrl:"www.google.de").then(response => 
 // success
 console.log("oh! success!");
, response => 
 // error
 console.log("oh! error!");
);

I placed the proxy.php file in the public/static folder and the vue-resource keeps getting the content of the proxy.php for me. But not go through it and retrun me the response.

I have checked the HTTP GET request with the firefox dev tools and it shows me that the GET request is 200 OK. But the response is always the content of that proxy.php. It seems like the php file is not doing the work that I expected it to do.

And here is the response I got from the vue-resource GET request:

<?php $nix=""; $type=$_GET['requrl']; if ($_GET['requrl'] != $nix) $file = file_get_contents($_GET['requrl']); else $file = "false type"; echo $file; ?>

I am kind of knowing that the dev server could be the reason because in old days, I have php installed in my apache local server, and now with vue.js. I just type npm run serve each time I want to start a dev server. I don't know what kind of dev server I just started and if it works with php.

So I would like to ask how u guys deal with vue-resource and php. Or maybe there is a better way in vue.js to go around the cross domain problem?

Here is the dev environment I am using now:
The project is created with vue.js and vue/cli 3 (contained webpack and etc.)
The plug-in I use is vuetify and vue-resource

For those who maybe search for the same question in the future. I have solved my question this way:

1. Set up an apache server, by which php is installed (I got the content of my proxy.php because of that I didn't have php installed in the dev server, which is started by the command npm run serve, and that was why it didn't work!)




2. Make sure that you enable the CORS on your apache server! Because this apache server will run at an different port (for example 8888) and your dev server for your vue app will run for example at 8080 as default! And different ports will be considered also as Cross Domain! So make sure to enable the CORS on your apache server!



3. 
   

   Point your HTTP GET Request to your proxy.php file in your apache server with vue-resource, here an example in vue app (my apache server is running at port 8888, the proxy.php file is also showed in this question, here I got my own ID with the GET Request to the 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. Now you successfully go around the Cross Domain!

I placed the proxy.php file in the public/static folder and the vue-resource keeps getting the content of the proxy.php for me. But not go through it and return me the response.

In order to run your php files you will need to configure a local server to serve and execute php files because your npm run serve command is serving static files only. (Javascript, html, css and etc)

I suggest you to install a Xampp to easily configure a PHP development environment.

So you will get a local server for your php environment and another for your vue app running in different ports.