前后端跨域解决方案

前后端跨域问题有两种解决方案

方案一：前端配置代理配置（如下图）->前端跨域实现方式
方案二：前端配置代理配置（如下图）->后端跨域实现方式

---

前端跨域实现方式

• 图中标1处：traget（目标地址）代表后端的地址加端口,在这里地址是localhost，而我的后台项目端口是8080，将localhost:8081转为localhost:8080。
• 图中标2处：[’^’ + process.env.VUE_APP_BASE_API]: ‘’，VUE_APP_BASE_API号代表的是api接口的识别标志（即api-1），而’’（两个单引号）代表将api-1替换成空值后重定向到后台。
• 经过标1和标2两处操作后，重定向的地址：localhost:8080/captchaImage

---

结果

刷新网页可以看到控制台的请求地址，其内部进行的跨域过程为：
localhost:8081/api-1/captchaImage -->
localhost:8080/captchaImage

---

后端跨域实现方式

---

吐槽一下：由于之前一直使用idea，然后每次修改完即使未保存，运行项目时，idea也会自动进行保存，而今天用vscode开发前端项目，由于修改端口后未保存就直接npm run dev（运行），导致修改一直未生效，查了好久的bug，最后发现是没有ctrl+s，浪费了一小时，血的教训…