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

问题描述

首先。我想用几句话来解释一下，我完全清楚什么是跨域问题以及如何处理它（在普通的 js 和 jQuery 中，但在 vue 中没有）

情况如下：我想使用HTTP GET 请求从一些地理服务器（其他域）获取 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 在 JS 中编写了一个 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-resource 不难理解。所以我发出 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 的内容，因为我没有在 dev 服务器中安装 php，它是由命令 npm run serve 启动的，这就是为什么它没有工作！）
确保在 apache 服务器上启用CORS ！因为这个 apache 服务器将在不同的端口（例如 8888）上运行，而您的 vue 应用程序的开发服务器将默认在 8080 上运行！并且不同的端口也将被视为跨域！因此，请确保在您的 apache 服务器上启用 CORS！

使用 vue-resource 将您的 HTTP GET 请求指向您的 apache 服务器中的 proxy.php 文件，这里是 vue 应用程序中的一个示例（我的 apache 服务器在端口 8888 上运行，proxy.php 文件也显示在这个问题中，这里我通过对 url http://httpbin.org/ip的 GET 请求获得了我自己的 ID ）：

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

现在你成功绕过了跨域！

标签： phpjqueryvue.jsvuejs2vue-resource

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

问题描述

解决方案

推荐阅读