Vue项目配置跨域访问和代理proxy设置方式
在vue单页应用项目开发时，避免不了要请求后端，这时通常就会出现跨域问题。有2种常用的解决方案
后端设置允许跨域访问
前端通过代理进行访问后端
下面我们只说说如何配置vue-cli代理访问：
vue-cli代理
最简单就是配置vueconifg进行实现
下面配置3个请求的后端，分别是：
请求http://localhost:4201/adminapi/*会代理请求http://localhost:8180/*
请求http://localhost:4201/portalapi/*会代理请求http://localhost:8185/*
请求http://localhost:4201/securityapi/*会代理请求http://localhost:8089/*
由于vue-cli是基于webpack，因此webpack的devServer选项都是支持配置的
module.exports={
//...
devServer:{
port:4201,
proxy:{
'/adminapi':{
target:'http://localhost:8180',
ws:true,
changeOrigin:true,
pathRewrite:{
'^/adminapi':''
}
},
'/portalapi/':{
target:'http://localhost:8185/',
ws:true,
changeOrigin:true,
pathRewrite:{
'^/portalapi':''
}
},
'/securityapi/':{
target:'http://localhost:8089/',
ws:true,
changeOrigin:true,
pathRewrite:{
'^/securityapi':''
}
}
},
disableHostCheck:true,//这是由于新版的webpack-dev-server出于安全考虑，默认检查hostname，如果hostname不是配置内的，将中断访问。
},
//...
}
Nodejs做中间时行路由转发
可以用nodejs和框架express对请求做路由转发。
在生产环境下更可以免去使用nginx配置反向代理。
方案各有利弊，技术架构选型时需要针对自己的项目环境，并且适合自己的团队是最好的。
后端跨域访问
后端的跨域访问设置也是比较简单的，不同语言JAVAPHPPythonGo的设置也大同小异。
查询一下都有比较多的资料，但在生产环境下，为了安全起见，还是建议不要设置允许跨域访问，或者限制允许跨域的IP
补充知识：Vue过滤器filter调用data、methods中的东西报错
今天学习了filter，我将过滤的过滤方法放到methods中发现怎么调用都说没有这个function
然后我把log了一下这个this发现这个this指向的竟然是window
于是网上找到了如下的解决方法：
定义一个全局变量:
letthat;
在beforeCreate生命周期将this赋值给that，通过that获得
varvm=newVue({
el:'#app',
data:{
},
beforeCreate:function(){
that=this
},
methods:{
fom(fmt){
...
}
},
....,
filters:{
dateformate:function(val){
returnthat.fom("yyyy-MM-dd")
}
}
})
以上这篇Vue项目配置跨域访问和代理proxy设置方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。