![vue axios跨域 vue axios跨域](https://image.shishitao.com:8440/aHR0cHM6Ly9ia3FzaW1nLmlrYWZhbi5jb20vdXBsb2FkL2NoYXRncHQtcy5wbmc%2FIQ%3D%3D.png?!?w=700&webp=1)
现在应用都是前后端分离,这也造成前端在调用接口时出现跨域问题,在控制台会这样提示
,如果有类似于此图的提示,就已经表明你的接口调用出现了跨域问题,此文章是我对于vue跨域其中一种方式的一些经验,如果错误,谢谢谅解!!!
首先对于vue跨域,我们可以用代理:在 config --> index.js里,,相信大家都懂,然后我们在调用接口时,用 /api 代替target的内容,就可以实现本地跨域调用了。
但是这个只能解决开发环境的跨域问题,但是生产环境里,会报错,所以我们需要再配置,在config --> dev.env.js内,
这是开发环境配置,然后我们再配置config --> prod.env.js
这个生产环境里的API_HOST内是跟index.js的target内容差不多,主要根据接口的设置,再然后就是调用时,我用的是axios,
使用process.env.API_HOST,在调用时,会根据环境不同调用上述的不同数据接口代理。但是要在这里说一声,当你配置完dev.env.js和prod.env.js之后,一定要重启此项目,不然配置不会生效,当时我就忘了重启,浪费了大量的时间。当然大家也可以把接口统一管理,方便以后修改,尽量不要使用粘贴复制接口在url内,维护代价太高。