AxiosError: Network Error

embedded/2025/2/24 14:53:33/

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

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.ppmy.cn/embedded/164844.html

相关文章

3DGS(三维高斯散射)算法原理介绍

3DGS(3D Gaussian Scattering)是一种基于高斯分布的三维场景表示与渲染方法,主要用于高效建模和渲染复杂的三维场景,尤其适用于动态环境或需要实时性能的应用。其核心思想是将三维空间中的物体或体积表示为多个高斯函数的集合&…

springboot和springframework版本依赖关系

springboot和springframework版本依赖关系 springboot版本 springframework版本 发布时间 1.0.x 1.0.0.RELEASE 4.0.3.RELEASE 2014.04 1.0.1.RELEASE 4.0.3.RELEASE 2014.04 1.0.2.RELEASE 4.0.3.RELEASE 2014.04 1.1.x 1.1.0.RELEASE 4.0.5.RELEASE 2014.06…

【python】网页批量转PDF

安装wkhtmltopdf 网站:wkhtmltopdf wkhtmltopdf http://www.baidu.com/ D:website1.pdf 安装pdfkit库 pip install pdfkit 批量转换代码 import os import pdfkit path_wkthmltopdf rE:\Program Files\wkhtmltopdf\bin\wkhtmltopdf.exe config pdfkit.configu…

为 Power Automate 注册 Adobe PDF Services

前言 最近,再测试如何将HTML转换成PDF,然后发现Adobe有一个免费的操作可以用,好开心,赶紧注册一下。 正文 1.先注册一个账号,然后登录到Adobe Developer 注册链接:https://www.adobe.com/go/getstarted_pow…

<02.23>Leetcode100

class Solution {public String minWindow(String s, String t) {if (s.length() < t.length()) {return "";}HashMap<Character, Integer> count new HashMap<>();// 统计组成t字符串的每个字符数量// count[n]<0&#xff1a;滑动窗口缺少多少个…

计算机网络————(一)HTTP讲解

基础内容分类 从TCP/IP协议栈为依托&#xff0c;由上至下、从应用层到基础设施介绍协议。 1.应用层&#xff1a; HTTP/1.1 Websocket HTTP/2.0 2.应用层的安全基础设施 LTS/SSL 3.传输层 TCP 4.网络层及数据链路层 IP层和以太网 HTTP协议 网络页面形成基本 流程&#xff1a…

MinIO对象存储在Windows中的部署方法

本文介绍在Windows电脑中&#xff0c;下载、部署对象存储系统MinIO的方法。 MinIO是一个高性能的对象存储系统&#xff0c;它兼容亚马逊AWS S3 API接口&#xff0c;专为存储大规模数据而设计&#xff1b;其使用开源协议&#xff0c;能够提供与Amazon S3云存储相同的API接口&…

视频图像质量评价开源算法介绍【持续更新】

关于视频质量评价介绍的文章可以跳转到该博客 浏览。 PSNR/SSIM 简介:基于原始视频与处理后视频的像素级误差计算,衡量压缩或传输后的质量损失,属于全参考评价算法。集成该算法的开源项目: OpenCVFFmpegEvalvidIQAVAMF 简介:Netflix开源,融合VIF(视觉保真度)、DLM(细…