在vue单页应用项目开发时，避免不了要请求后端，这时通常就会出现跨域问题。有2种常用的解决方案后端设置允许跨域访问前端通过代理进行访问后端下面我们只说说如何配置vue-cli代理访问：vue-cli代理vue-cli代理最简单就是配置vue conifg进行实现下面配置3个请求的后端，分别是：下面配置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 不是配置内的，将中断访问。
},
//...
}
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做中间时行路由转发可以用nodejs和框架express对请求做路由转发。在生产环境下更可以免去使用nginx配置反向代理。方案各有利弊，技术架构选型时需要针对自己的项目环境，并且适合自己的团队是最好的。后端跨域访问后端跨域访问后端的跨域访问设置也是比较简单的，不同语言JAVA PHP Python Go的设置也大同小异。查询一下都有比较多的资料，但在生产环境下，为了安全起见，还是建议不要设置允许跨域访问，或者限制允许跨域的IP补充知识：Vue 过滤器filter调用data、methods中的东西报错补充知识：补充知识：Vue 过滤器filter调用data、methods中的东西报错今天学习了filter，我将过滤的过滤方法放到methods中发现怎么调用都说没有这个function然后我把log了一下这个this 发现这个this指向的竟然是window于是网上找到了如下的解决方法：定义一个全局变量:
let that;
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")

}

}

})

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设置方式就是小编分享给大家的全部内容了，希望能给大家一个参考。