【Vue】Vue 中解决跨域问题

深碍√TFBOYSˉ_ 2023-07-10 14:26 18阅读 0赞

**背景**

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

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

--------------------

**问题来源**

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

--------------------

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70 1][]

### 3、遗留问题 ###

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

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

[Link 1]: https://blog.csdn.net/qq_38128179/article/details/84956552
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200303123400687.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200303123610189.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ==,size_16,color_FFFFFF,t_70