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 注解可以简化跨域请求的配置,无需手动设置响应头,注解会自动处理这些细节。

相关推荐
林深的林24 分钟前
Http证书体系及证书加密流程(通信流程)
网络协议·http·https
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴6 小时前
Mix
前端·webgl
代码续发6 小时前
前端组件梳理
前端
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码7 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记7 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏7 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante8 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端