Vue.js代理设置解决跨域问题
当我们在使用vue.js进行项目开发时,因为我们可以本地以localhost:port(端口号)这样形式启动项目进行本地调试,这个时候我们需要使用后端接口就会出现跨域问题,这是因为localhost和访问域名不一致造成,在vue-cli使用的模板插件中,就有解决这个问题的方法,它是通过使用node代理来将localhost映射成访问的域名。我们是在config下的index.js文件中进行设置,一
·
当我们在使用vue.js进行项目开发时,因为我们可以本地以localhost:port(端口号)这样形式启动项目进行本地调试,这个时候我们需要使用后端接口就会出现跨域问题,这是因为localhost和访问域名不一致造成,在vue-cli使用的模板插件中,就有解决这个问题的方法,它是通过使用node代理来将localhost映射成访问的域名。
我们是在config下的index.js文件中进行设置,一般我们使用vue-cli搭建好项目需要跨域只需要修改下面部分:
dev: {
env: require('./dev.env'),
port: 8686, //这里的端口号每个项目对应一个,就可以直接访问localhost:8686
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api':{ //这里是公共部分,在调用接口时后面接不相同的部分,/api就相当于http://192.168.0.199:8926/api这一段
target:'http://192.168.0.199:8926', //这里写的是访问接口的域名和端口号
changeOrigin: true, // 必须加上这个才能跨域请求
// pathRewrite: { // 重命名
// '^/api': ''
// }
}
},
我们可以同时代理多个地址,此时我们已经完全解决了跨域问题,以及本地测试后台无法向我们本地环境设置cookie的情况了。
更多推荐
已为社区贡献4条内容
所有评论(0)