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

首先。我想用几句话来解释一下，我完全知道什么是跨域问题以及如何处理它（在使用jQuery的纯js中，而不是在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;
?>

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

旧方法工作得很好，我将“true”url作为requrl发送到php文件，php得到我想要的内容并作为响应返回。因此，我可以稍后使用jQueryAjax处理响应

---

真正的问题：

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

但现在我将整个应用程序移动到vue.js框架。所以我现在使用的是vue资源，而不是jQueryAjax

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的内容。但不要看一遍，然后给我回复

我已经用firefox开发工具检查了HTTP GET请求，它显示GET请求是200 OK。但是响应总是proxy.php的内容。php文件似乎没有完成我预期的工作。

下面是我从vue资源获取请求得到的响应：

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

现在你成功地穿越了这个领域

我将proxy.php文件放在public/static文件夹中，vue资源会不断为我获取proxy.php的内容。但不要仔细检查并给我回复

为了运行php文件，您需要配置一个本地服务器来服务和执行php文件，因为您的

npm run serve

命令仅服务于静态文件。（Javascript、html、css等）

我建议您安装一个可以轻松配置PHP开发环境的

---

因此，您将获得一个用于php环境的本地服务器，另一个用于在不同端口上运行的vue应用程序。

您是否尝试过转储$\u请求，以确保$\u get未以某种方式取消设置，我曾经经历过这种情况，因为有人在XSS预防解析器中犯了错误，所以清除了$\u GET。@Marc Newton谢谢你的建议，但我并不认为这是问题所在。我可以问一下您是如何处理跨域问题的吗？控制台打印您是一个错误吗？我们可以看到吗？如果您看到proxy.php的源代码，那么您没有正确安装或设置php。另外，

npm run serve

不会启动php fpm，是吗？。哦，是的，所以你得到了proxy.php的文本响应，你是对的，你的服务器不会处理php，因为它只用于处理你的vue文件。比你好多了！我按照您的建议，配置了一个本地apache服务器来运行我的proxy.php。所以我可以访问我自己的apache服务器并使用php文件！我现在“再次”讨论了跨域问题，我还为其他可能与我有相同问题的人提出了我的解决方案。