首先。我想用几句话来解释我完全了解跨域问题是什么以及如何处理它(在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
对于那些可能在将来搜索相同问题的人。我这样解决了我的问题:
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);
});
我将proxy.php文件放在public / static文件夹中,vue-resource继续为我获取proxy.php的内容。但是没有通过它并回复我的回应。
为了运行您的php文件,您需要配置本地服务器来提供和执行php文件,因为您的npm run serve
命令仅提供静态文件。 (Javascript,html,css等)
我建议你安装一个Xampp来轻松配置PHP开发环境。
因此,您将获得一个适用于您的php环境的本地服务器,另一个适用于在不同端口运行的vue应用程序。