vue跨域实现与原理(proxyTable)

1、实现
1.1、使用proxyTable代理
1.2、注意事项
2、proxyTable原理
1、实现
使用vue搭建的项目在本地与后端联调时,因为是使用node运行服务器,IP与后端不一致,所以会产生跨域问题,需要使用如JSONP、跨域代理等手段进行跨域请求,而vue已经帮我们配置好了,只需要设置一下proxyTable就行。

1.1、使用proxyTable代理
文件路径如下,在项目根目录下的config文件夹中的index.js中

配置代码如下

dev{
proxyTable: {
‘/api’: {
target: ‘http://192.168.0.1:200’, // 要代理的域名
changeOrigin: true,//允许跨域
pathRewrite: {
‘^/api’: ‘’ // 这个是定义要访问的路径,名字随便写
}
}
}

使用时代码

// /api/getMenu相当于*http://192.168.0.1:200/getMenu
// /api相当于http://192.168.0.1:200
this.$http.get("/api/getMenu", {
}
.then(res => {
})
.catch(function(error) {
});

1.2、注意事项
以上面代码设置的为例,会把请求中所有带有/api字段的都替换掉,例如api/getMenu/api,前后两个都会被替换,导致404等错误,在代理数量比较多的时候容易出现这个问题。

2、proxyTable原理
浏览器是禁止跨域的,但是服务端不禁止,在本地运行npm run dev等命令时实际上是用node运行了一个服务器,因此proxyTable实际上是将请求发给自己的服务器,再由服务器转发给后台服务器,做了亦曾代理,因为不会出现跨域问题。

你可能感兴趣的:(vue跨域实现与原理(proxyTable))