在vue项目中配置proxy解决跨域问题

1.问题：

    后端给的接口是：https://stg-pteppp.leanapp.cn/h5/jsconfig.前端在本地开发中调用该接口跨域。

---

2.解决方案：

    *  在webpack中配置proxy。如下图所示

如上： 

1. target是你要代理的域名，必须要加上http。

2.  这里用'/api'代替target里面的地址，组件中调用接口时直接用'/api'代替。比如我要调用'https://xxx.com/news.直接写'/api/news'即可

3. changeOrigin必须为true

---

    *  在页面中请求写法如下：

---

        开心吧。数据终于拿到啦！！！

我们知道，vue2.0项目中的static文件夹存储的是静态资源，可以直接被访问到的，如果我们将mock的数据放入static文件夹，在浏览器中直接访问http://localhost:8080/static/json/list.json发现是可以访问到数据的。于是我们在页面将mock数据的请求写成下面这样：

则需要在webpack中做如下配置：

注意这里的http一定不能省略，否则数据请求不到。这样做的好处是在本地开发时mock的接口和线上的接口一致，避免上线前大量改动接口名称。