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

Posted 2023-03-09

参考技术A 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的接口和线上的接口一致，避免上线前大量改动接口名称。