vue-cli中跨域问题解决方法

webpack提供了配置代理的方法解决跨域

1 在vue-cli项目中打开webpack.dev.cof.js，如下

2 打开conifg目录下的index.js，在 proxyTable中进行配置

 proxyTable: {
         '/api': {
             target: 'http://192.168.10.202:8080/',//设置你调用的接口域名和端口号 别忘了加http
             changeOrigin: true,
             pathRewrite: {
               '^/api': '/'//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
             }
         }
 },

Vie

 proxyTable: {
         '/api': {
             target: 'http://192.168.10.202:8080/',//设置你调用的接口域名和端口号 别忘了加http
             changeOrigin: true,//设置true 代表跨域访问
             secure: false,  // 如果是https接口，需要配置这个参数
             pathRewrite: {
               '^/api': '/'//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
             }
         }
 },               

3 配置好后，就可以获取后台提供的接口，然后进行页面的渲染了

  this.$http.get('/api/user/add')
  .then(res=>{
             console.log(res);
  }).catch(err=>{
             console.log(err);
  });