vue-cli中跨域问题解决方法
webpack提供了配置代理的方法解决跨域
1 在vue-cli项目中打开webpack.dev.cof.js,如下
2 打开conifg目录下的index.js,在 proxyTable中进行配置
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 proxyTable: { 2 '/api': { 3 target: 'http://192.168.10.202:8080/',//设置你调用的接口域名和端口号 别忘了加http 4 changeOrigin: true, 5 pathRewrite: { 6 '^/api': '/'//这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add’即可 7 } 8 } 9 },
1 proxyTable: { 2 '/api': { 3 target: 'http://192.168.10.202:8080/',//设置你调用的接口域名和端口号 别忘了加http 4 changeOrigin: true,//设置true 代表跨域访问 5 secure: false, // 如果是https接口,需要配置这个参数 6 pathRewrite: { 7 '^/api': '/'//这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add’即可 8 } 9 } 10 },
3 配置好后,就可以获取后台提供的接口,然后进行页面的渲染了
1 this.$http.get('/api/user/add') 2 .then(res=>{ 3 console.log(res); 4 }).catch(err=>{ 5 console.log(err); 6 });