【Vue】Vue 中解决跨域问题

背景

跨域问题，来源于浏览器中的同源策略。同源（或同一个域）是两个页面具有相同的 协议，主机 和 端口号。在前后端分离的项目中，两个页面（即访问端与服务端）通常是 非同源 的，因此会出现跨域时，浏览器阻止一个域的访问，导致取不到后端的数据。本文只讨论博主在 Vue 的学习过程中如何在 前端解决跨域问题，更多跨域解决方案参考这篇文章，感谢该博主的分享！

个人理解，如有错误，还请评论区多多指教！

---

问题来源

在尝试获取新型肺炎疫情信息，并将其制作成表格和地图来显示的时候，发现在前端访问接口时会因为跨域问题而取不到数据。（后面会编写关于如何制作新型肺炎疫情的信息展示）

---

1、修改配置文件中的接口(示例：请求腾讯官方新型肺炎疫情信息接口）

打开 config -> index.js 的如下位置，添加 proxyTable，各配置项含义如下：

• target：要访问的接口的基础地址
• changeOrigin：是否可以跨域
• secure：是否进行 https 验证
• pathRewrite：将 api 替换成 ' ' 中的值

2、在组件调用中，使用代理接口代替

在组件中调用时，用 api 替代 target

3、遗留问题

在使用了热门的后台管理框架 vue-element-admin 之后，无法采用如上方式来解决跨域问题，搜集了非常多的资料也未能解决。

还请懂该问题的大神评论赐教！感激不尽。