axios跨域问题导致后端无法发送数据到前端，该怎么解决？

Question

问题遇到的现象和发生背景：
我是大四毕业生，这是我毕设遇到的问题
我的项目有一个前端和一个后端，前端是vite+vue3写的，后端用了Koa的工具
-
前端在接受后端数据的时候，使用的是这行代码：
import { get } from 'axios'; // 依赖的工具是axios
const response = await get(this.testcase.url) // this.testcase.url的内容是http://localhost:8080
-
而后端的完整代码如下，我后端写的比较简单，且前后端分别属于两个不同的项目：
const Koa = require('koa');
const app = new Koa;
-
const response = {
name:'abcdef',
number:9,
MyArray:[1,"a",3,4],
Boolee:true
}
-
app.use(ctx => {
ctx.body = response;
});
app.listen(8080);
-
当我首先启动后端服务器，再使用npm run dev将前端在浏览器上运行起来以后，发现前端控制台报出了这个错误：
Access to XMLHttpRequest at 'http://localhost:8080/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
查阅资料得知这与axios跨域问题有关，但我对此完全没有任何解决思路。
-
我希望问题解决以后，我在网页上运行的前端能够收到来自后端的数据，并顺利对其进行操作产生正确的结果。
请大家帮帮忙吧，谢谢了。

Answer 1

https://www.jianshu.com/p/3e5aac6bf8db

Answer 2

跨域问题的话，1.前端可以使用JsonP解决，2.前端可以使用nginx反向代理解决，3.后端接口加上@CrossOrgin注解即可解决跨域，4.SpingBoot设置配置类进行对外暴露接口来解决

Answer 3

其实后端已经收到请求了，是因为安全机制在浏览器端被拦截了，前端或者后端都可以处理。
前端：webpack proxy 代理
后端：配置响应头response.setHeader("Access-Control-Allow-Origin", "*")