AxiosError: Network Error

不知怎么的，项目还在开发阶段，之前还好好的，玩儿了两天再一打开发现页面无法显示数据了，报错如下：

我以为是后端出问题了，但是后端控制台无报错，又用postman测试了一下，可以获取到数据。

后来检查了一下请求，发现是跨域请求换端口的问题，前端是5137，后端是8080，之前是可以的一直没问题

server: {
    port: 5173,
    proxy:{
      '/api':{
        target:'http://localhost:8080',//后端接口的域名 
        changeOrigin:true,//是否改变源
        rewrite:(path)=>path.replace(/^\/api/,''),//重写路径,去掉路径中的/api
      }
    }
  }

就是换源然后重写路径嘛，之前一直没问题，后来查了资料，有一种说法是前端做了处理还不够，后端也要设置接受这种处理。解决方法如下：

在后端的每一个controller添加@CrossOrigin注解

@CrossOrigin 是 Spring Framework 提供的一个注解，用于解决跨域资源共享（CORS）的问题。当您在后端服务中使用这个注解时，它允许您的后端服务接受来自不同源（即不同域名、协议或端口）的请求。

为什么需要 @CrossOrigin 注解？

在Web开发中，出于安全考虑，浏览器默认会限制从一个源发起的脚本对不同源的资源的访问。这称为同源策略（Same-Origin Policy）。如果后端服务和前端应用不在同一个源上，那么直接发起请求会遭到浏览器的阻止，从而导致跨域请求失败。

@CrossOrigin 注解的作用

1. 允许跨域请求 ：使用 @CrossOrigin 注解可以告诉Spring框架，该接口允许跨域请求。这意味着来自不同源的请求将被接受。

2. 配置CORS响应头 ：@CrossOrigin 注解会自动配置响应头，如 Access-Control-Allow-Origin，以允许跨域请求。您可以在注解中指定允许哪些源访问您的后端服务。

3. 简化配置 ：使用 @CrossOrigin 注解可以简化跨域请求的配置，无需手动设置响应头，注解会自动处理这些细节。