解决webpack+vue-cli+vue-resource中跨域问题

前两天我遇到一个特别棘手的问题，问题呈现的样式大概是这个样子的

根据以往的经验看到XMLHttpRequest cannot load这段代码天然想到的是跨域问题，跟服务端讲了这件事情以后，服务端就加上了支持跨域的代码，可是前端仍是调不到数据，而后查了不少资料，最后找到一种解决办法

在config文件下面有index.js文件里有一个叫proxyTable的配置参数

proxyTable: {
      '/restful':{
        target:'http://xxxxx/member/service/',
        changeOrigin:true,
        pathRewrite:{
            '^/restful':'/restful'
        }
      }
    },

changeOrigin这参数设置为true的时候，就能够虚拟一个本地代理的服务接收请求这样就能够解决跨域问题了
target是你请求接口的域名

接口调用的时候能够这么写

this.$http.post(commonUrl + "/restful/member?op=getMember&access_token=111", {
          op: 'getMember',
        }).then(response => 
        }, response => {

        });
      },

若是

proxyTable: {
      '/restful':{
        target:'http://xxxxx/member/service/',
        changeOrigin:true,
        pathRewrite:{
            '^/restful':''
        }
      }
    },

'^/restful':'‘

restful后面是空的话那么接口就应该这么写

this.$http.post(commonUrl + "/restful/restful/member?op=getMember&access_token=111", {
          op: 'getMember',
        }).then(response => 
        }, response => {

        });
      },

上面我写的commonUrl主要是为了在传到生产环境的时候方便使用的一个全局变量

写一个全局的js

在里面设置一个全局变量commonUrl

const IS_DEBUG = true //若是是测试环境就是true，若是是生产环境就是false
const commonUrl = IS_DEBUG ? '':'http://xxxxx/member/service/'