在vue单页应用项目开发时,避免不了要请求后端,这时通常就会出现跨域问题。有2种常用的解决方案
后端设置允许跨域访问
前端通过代理进行访问后端
下面我们只说说如何配置vue-cli代理访问:
vue-cli代理
最简单就是配置vue conifg进行实现
下面配置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配置反向代理。
方案各有利弊,技术架构选型时需要针对自己的项目环境,并且适合自己的团队是最好的。
后端跨域访问
后端的跨域访问设置也是比较简单的,不同语言JAVA PHP Python Go的设置也大同小异。
查询一下都有比较多的资料,但在生产环境下,为了安全起见,还是建议不要设置允许跨域访问,或者限制允许跨域的IP
补充知识:Vue 过滤器filter调用data、methods中的东西报错
今天学习了filter,我将过滤的过滤方法放到methods中发现怎么调用都说没有这个function
然后我把log了一下这个this 发现这个this指向的竟然是window
于是网上找到了如下的解决方法:
定义一个全局变量:
let that;
在beforeCreate生命周期将this赋值给that,通过that获得
var vm = new Vue({
el: '#app',
data: {
},
beforeCreate: function () {
that = this
},
methods:{
fom(fmt){
...
}
},
....,
filters: {
dateformate: function (val) {
return that.fom("yyyy-MM-dd")
}
}
})
以上这篇Vue项目配置跨域访问和代理proxy设置方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持亿速云。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。