前端解决多个跨域问题

前端解决多个跨域问题

前言：虽然一直是前后端分离，但是没了解过跨域问题，直接是vue.config.js中的内容直接搬过来改改，但是后来调用了下百度语音拟合的api接口发现，有跨域问题，这个肯定不能动用后端了就查了下资料改了下proty代理的配置，总结了一下。

对于问题要知道前因后果，所以先理解下为什么有跨域问题？

因为前端代码是跑在浏览器里的
你的所有网路请求说白了就是浏览器帮你发出去的. 并不是什么js帮你发出去的, js只是一门语言, 他只是按照浏览器的要求, 语法的要求, 按照一定的规范和格式, 把数据发出去, 就是这样。

为什么后端没有跨域这个问题？
因为后端是跑在系统里面的浏览器可以主动发起一个跳过跨域的网络请求, 但是他不会让你在 它的内核 里发起跨域请求. 浏览器是跑在系统里的, 后端写的程序也是直接跑在系统里的,前端相当于是浏览器的下属, 得听从浏览器的规则。

为什么浏览器不允许你去发送跨域请求?
很简单, 因为没有哪家浏览器有那个能力自己造内核, 基本都是行业内比较知名的内核, 比如 chrome 的内核, 浏览器只是一个壳, 然后把内核嵌入进去, 你前端界面的渲染包括界面的展示, 并不是浏览器弄出来的, 而是内核渲染出来的.

而且对于任何正常的内核来说纯前端都是不允许跨域的

对于跨域问题有两种解决模式
①前端②后端

我是前端，所以。。。

我们现在都是前后端分离开发，所以在前端利用webpack配置反向代理
在webpack配置反向代理，如果是多个跨域问题u我们可以配置多个代理解决本地跨多个域名的问题

在项目中创建vue.config.js,配置proxy当我们请求的时候直接利用/dev代替http://tsn.baidu.com ,/表示http://localhost:3003

this.$axios.get("/dev/add")
this.$axios.get("/update")

这样请求就相当于http://tsn.baidu.com/add
这样请求就相当于http://localhost:3003/update