如何使用vue-resource和proxy.php来解决跨域问题

Question

首先。我想用几句话来解释我完全了解跨域问题是什么以及如何处理它（在jQuery中用jQuery，但不是在vue中）

情况就是这样：我想使用HTTP GET请求从某些geoserver（其他域）获取WFS功能（作为xml）。很明显，由于相同的原产地政策，它将被封锁。

我曾经使用一个非常简单的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中用jQuery编写一个Ajax调用。看起来像这样：

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

旧方法运行良好，我将“真实”网址作为requrl发送到php文件，php得到我想要的东西并将其作为响应返回。所以我稍后可以使用jQuery-ajax来处理响应。

真正的问题：

但现在我将整个应用程序移动到vue.js框架。所以我现在使用的是vue-resource而不是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-resource继续为我获取proxy.php的内容。但是没有通过它并回复我的回应。

我已经使用firefox开发工具检查了HTTP GET请求，它向我显示GET请求是200 OK。但响应始终是该proxy.php的内容。好像php文件没有做我期望它做的工作。

这是我从vue-resource GET请求得到的响应：

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

我有点知道开发服务器可能是原因，因为在过去，我已经在我的apache本地服务器上安装了php，现在使用vue.js.我只是在每次想要启动开发服务器时键入npm run serve。我不知道我刚开始使用什么样的开发服务器，以及它是否适用于php。

所以我想问一下你们如何处理vue-resource和php。或者也许在vue.js中有更好的方法来解决跨域问题？

这是我现在使用的开发环境：使用vue.js和vue / cli 3（包含webpack等）创建项目。我使用的插件是vuetify和vue-resource

对于那些可能在将来搜索相同问题的人。我这样解决了我的问题：

设置一个apache服务器，通过它安装php（我得到了我的proxy.php的内容因为我没有在开发服务器中安装php，这是由命令npm run serve启动的，这就是为什么它不起作用！）
确保在Apache服务器上启用CORS！因为这个apache服务器将在不同的端口运行（例如8888），你的vue应用程序的dev服务器将在8080默认运行！不同的端口也将被视为跨域！因此，请确保在您的Apache服务器上启用CORS！
使用vue-resource将HTTP GET请求指向apache服务器中的proxy.php文件，这是vue app中的一个示例（我的apache服务器在端口8888运行，proxy.php文件也显示在这个问题中，这里我获得我自己的ID与网址http://httpbin.org/ip的GET请求）： 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！