AxiosError: Network Error

news/2025/2/25 4:05:58

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

https://i-blog.csdnimg.cn/direct/da308dea4b2f42c3a9b3a3d3ab195604.png" width="1090" />

 我以为是后端出问题了,但是后端控制台无报错,又用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 注解可以简化跨域请求的配置,无需手动设置响应头,注解会自动处理这些细节。


http://www.niftyadmin.cn/n/5864966.html

相关文章

npm使用了代理,但是代理软件已经关闭导致创建失败

如果在关闭前打开了vscode,此时vscode中的终端没有刷新,就会出现这个问题,最开始会一直转圈圈,直到超时,然后出现该报错 ❯ npm create vuelatest npm error code ECONNREFUSED npm error syscall connect npm error …

Qt QTreeWidget 总结

Qt QTreeWidget 总结 1. 概述 QTreeWidget 是 Qt 中用于显示树形结构的控件,继承自 QTreeView,但提供了更简单的接口。适合展示层级数据(如文件目录、组织结构)。每个节点是 QTreeWidgetItem 对象,支持文本、图标、复…

《鸿蒙开发-答案之书》获取视频第一帧和视频时间

《鸿蒙开发-答案之书》获取视频第一帧和视频时间 /*** 获取视频信息**let result await MySightUtil.getSightInfo(this.sightUri);*let base64 : string result[0];*let duration : number result[1]** param uri 视频地址* returns 第一个数据是缩略图 base64 字符串&…

通过AI辅助生成PPT (by quqi99)

作者:张华 发表于:2025-02-23 版权声明:可以任意转载,转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明(http://blog.csdn.net/quqi99) 问题 媳妇需要将一个pdf文件中的某些部分做成PPT课件,我在想是…

【Windows系统node_modules删除失败(EPERM)问题解析与应对方案】

Windows系统node_modules删除失败(EPERM)问题解析与应对方案 问题现象 当开发者尝试删除Node.js项目的node_modules目录时,常会遇到如下错误提示: [Error: EPERM: operation not permitted, unlink D:\project\...\esbuild.exe] {errno: -4048,code: …

电商运营中私域流量的转化与变现:以开源AI智能名片2+1链动模式S2B2C商城小程序为例

摘要 电商运营的核心目标在于高效地将产品推向市场,实现私域流量的转化和变现。本文以“罗辑思维”的电商实践为背景,探讨了私域流量变现的重要性,并深入分析了开源AI智能名片21链动模式S2B2C商城小程序在电商运营中的应用与价值。通过该模式…

【SpringMVC】概述 SSM:Spring + SpringMVC + Mybats

目录标题 0、SSM (Spring SpringMVC MyBatis)1、回顾MVC1.1、什么是MVC1.2、Model1时代1.3、Model2时代1.4、回顾Servlet 2、什么是SpringMVC2.1、概述2.2、中心控制器2.3、SpringMVC执行原理 0、SSM (Spring SpringMVC MyBatis) SSM (Spring SpringMVC MyBatis) 是一个很…

CSS基础(盒子模型的组成、内容溢出、隐藏元素的方式、样式的继承、元素的默认样式、布局技巧、元素之间的空白问题、行内块元素的幽灵空白问题)

文章目录 1. 盒子模型的组成1.1 内容区1.2 默认宽度1.3 内边距1.3.1 内边距属性1.3.2 复合属性1.3.3 单位1.3.4 注意事项 1.4 边框1.4.1 边框属性1.4.2 复合属性1.4.3 单方向边框1.4.4 边框样式1.4.5 注意事项 1.5 外边距1.5.1 外边距属性1.5.2 复合属性1.5.3 注意事项 1.6 外边…