如何使用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;
?>

所以基本上我用 JS 写了一个 Ajax-调用 jQuery。看起来像这样：

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 得到我想要的，return 它作为响应。所以我稍后可以用 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 运行 serve。 我不知道我刚启动的是哪种开发服务器，它是否适用于 php。

所以想请教各位大佬是怎么处理vue-resource和php的。或者 vue.js 中有更好的方法来解决跨域问题？

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

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

设置一个apache服务器，通过它安装php（我得到了我的proxy.php的内容，因为我没有php 安装在开发服务器中，由命令 npm 运行 serve 启动，这就是它不起作用的原因！)
确保在您的 apache 服务器上启用 CORS！因为此 apache 服务器将运行在不同的端口（例如 8888），而您的 vue 应用程序的开发服务器将运行例如默认为 8080！而不同的端口也会被认为是跨域！ 所以请务必在您的 Apache 服务器上启用 CORS！

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

至此你跨域成功了！

Answer 1

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.

为了运行您的 php 文件，您需要配置本地服务器来服务和执行 php 文件，因为您的 npm run serve 命令正在服务静态文件只要。（Javascript、html、css 等）

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

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

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

how to use vue-resource and proxy.php to solve the cross domain problem

php

jquery

vue.js

vue-resource

vuejs2