关于 axios 和 devserver 调取接口获取数据的全面深刻理解

问题描述:在写vue项目中,调取后台接口的,由于解决接口跨域问题,我们都会用webpack的devserver 做一个本地的代理

写法和说明如下:关于 axios 和 devserver 调取接口获取数据的全面深刻理解

假如后台的接口没有/api,前端为了做全局的代理,可以手动在每个接口前面加上‘/api’ ,这里方便统一在接口前面添加target,然后在devserver里面再重写‘/api’ ,将至去掉即可,切记,这里只是本地代理,之和开发环境有关系,和线上生产环境没有任何关系的,比如后台说,我后台没有做nginx转发,你前端变化一下正式的接口域名地址吧,那绝对不是在这里变得哦,那你得在axios。defaults.baseURL设置,或者创建实例的axios的baseURL去设置新的接口域名地址。

或者不在每个接口信息前面添加/api,可以再封装的请求里面添加,这样也较为方便关于 axios 和 devserver 调取接口获取数据的全面深刻理解

二:当后台接口cors开放的时候,前端就不需要解决跨域问题,那我们可以不适用devserver做本地代理,那我们也有两种解决方案和思路

1)一般vue项目我们都是用axios来请求接口,那我们可以设置axios.defaults.baseURL=''设置全局默认的地址;当你创建了一个axios实例的时候,就设置实例的defaults.baseURL

关于 axios 和 devserver 调取接口获取数据的全面深刻理解

2)也可以直接拼接在你前端请求接口信息的签名,这样全局拼接就可以了,其实和上面全局在接口前面添加/api是一样的道理

关于 axios 和 devserver 调取接口获取数据的全面深刻理解