在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的接口和线上的接口一致,避免上线前大量改动接口名称。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容