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

Question

首先。我想多说几句说明我完全清楚什么是跨域问题以及如何处理它（在普通的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);
})

旧方法效果很好，我将 "true" url 作为 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

---

对于那些将来可能会搜索相同问题的人。我已经通过这种方式解决了我的问题：

1. 设置一个apache服务器，通过它安装php（我得到了proxy.php的内容，因为我没有在开发服务器中安装php，它是由命令 npm run serve，这就是它不起作用的原因！)

2. 确保在 apache 服务器上启用 CORS！因为这个 apache 服务器将在不同的端口（例如 8888）上运行，而您的 vue 应用程序的开发服务器将默认在 8080 上运行！并且不同的端口也将被视为跨域！ 所以请务必在您的 apache 服务器上启用 CORS！

3. 使用 vue-resource 将您的 HTTP GET 请求指向您的 apache 服务器中的 proxy.php 文件，这里是 vue 应用程序中的示例 （我的 apache 服务器在端口 8888 上运行，还显示了 proxy.php 文件在这个问题中，我在这里得到了我自己的 ID 以及对 url 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);
       });
   

4. 现在你成功绕过了跨域！

Answer 1

我将 proxy.php 文件放在 public/static 文件夹中，并且 vue-resource 不断为我获取 proxy.php 的内容。但不要通过它并给我回复。

为了运行您的 php 文件，您需要配置一个本地服务器来提供和执行 php 文件，因为您的 npm run serve 命令只提供静态文件。 (Javascript, html, css 等)

我建议你安装一个Xampp来轻松配置PHP开发环境。

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