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

问题描述 投票:0回答:1

首先。我想用几句话来解释我完全了解跨域问题是什么以及如何处理它(在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


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

  1. 设置一个apache服务器,通过它安装php(我得到了我的proxy.php的内容因为我没有在开发服务器中安装php,这是由命令npm run serve启动的,这就是为什么它不起作用!)
  2. 确保在Apache服务器上启用CORS!因为这个apache服务器将在不同的端口运行(例如8888),你的vue应用程序的dev服务器将在8080默认运行!不同的端口也将被视为跨域!因此,请确保在您的Apache服务器上启用CORS!
  3. 使用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); });
  4. 现在你成功地绕过了Cross Domain!
php jquery vue.js vuejs2 vue-resource
1个回答
1
投票

我将proxy.php文件放在public / static文件夹中,vue-resource继续为我获取proxy.php的内容。但是没有通过它并回复我的回应。

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.