扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
本篇文章为大家展示了vue使用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实现跨域的原理，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网