vue报错ERROR Network Error AxiosError: Network Error at XMLHttpRequest.handleError--Spring Security 配置

小金学渗透

已于 2025-03-29 10:40:08 修改

阅读量2.5k

点赞数 7

文章标签：前端

于 2025-02-18 11:25:32 首次发布

本文链接：https://blog.csdn.net/weixin_62283559/article/details/145698898

版权

报错原因：AxiosError: Network Error 是一个常见的网络请求错误，通常表示客户端（浏览器）无法与服务器建立连接或请求未能成功发送。

在完善代码安全性的过程中，没有运行项目，只改了代码，结果最后页面报错，于是开始寻找解决方法。

发现该页面可以关闭，关闭后网站页面依然可以显示，但是，页面数据无法获取渲染，F12查看控制台，一片红，人都崩了。

网上查询页面标红原因，说是跨域问题，有可能是路径写错了，检查了一遍并没有写错，页面标红还找到了个解决办法，如下所示：

  devServer: {
      client: {
           overlay: false // 禁用错误覆盖层
       },

在vue.config.js添加后发现全屏标红解决了，但是后台还是一大排片报错，尝试重新登录也都没有反应，将之前修改的代码注释后，发现问题还是没解决，后端还出现了跨域的报错。

com.example.exception.CustomException: null
	at com.example.common.config.JwtInterceptor.preHandle(JwtInterceptor.java:54) ~[classes/:na]
	at org.springframework.web.servlet.HandlerExecutionChain.applyPreHandle(HandlerExecutionChain.java:148) ~[spring-webmvc-5.3.15.jar:5.3.15]
	at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:1062) ~[spring-webmvc-5.3.15.jar:5.3.15]
	at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:963) ~[spring-webmvc-5.3.15.jar:5.3.15]
	at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:1006) ~[spring-webmvc-5.3.15.jar:5.3.15]
	at

在一个解释中找到可能的原因：Spring Security 配置问题。如果项目中使用了 Spring Security，可能会与 JWT 拦截器产生冲突，导致请求被拦截。

有了头绪，想起来在添加安全性的时候使用注解（如 @NotNull、@Size、@Min、@Max）对字段进行校验，所有注解都已经注释了，但是在pom依赖里面添加的依赖并没有被删除，将依赖注释后再重新启动后台运行，问题解决，页面数据恢复，后台也不报错了，我的老天，终于好了！

最后总结一下这个问题，spring-boot-starter-security 依赖会默认启用 Spring Security，并且所有请求都会被要求认证。如果你没有配置 Spring Security，所有请求都会被拦截，导致 401 未授权错误。解决方法是在 pom.xml 中删除或注释掉 spring-boot-starter-security 依赖，或者创建一个 Spring Security 配置类，自定义安全规则。

还有spring-boot-starter-validation 依赖用于字段校验（如 @NotNull、@Size 等），通常不会直接导致 Spring Security 报错。但是我为了保险起见也都注释了，之前的修改白干了。下次记得修改代码的时候边改边运行，才能及时发现错误。

二编：

最近又遇到了这个问题，运行代码后打开网页又是满屏红，但我没有修改与此有关的配置，于是百思不得其解，后面换成localhost:8080打开又没有这个问题了，打开f12开发者工具控制台有1小行报错：

搜索后的结果说这个错误是表示浏览器尝试加载某个资源（如 API 接口、图片、脚本文件等）时失败，但是我正常业务并没有受影响。所以我又返回ip:8080页面尝试关闭报错页面，关闭后我的前台首页数据无法渲染，也就是跨域问题导致无法获取数据库资源。联想了一下，可能是我后台数据库连接配置的地址是localhost:8080，所以以localhost:8080打开网页可以获取数据库资源，但ip:8080没有配置到数据库里，加上因为修改某些代码导致了这个问题，所以ip:8080无法访问数据库资源。究其原因，就是我改代码了，但是我改了太多，又一直用localhost打开所以才没有发现问题。所以最后使用都只能用localhost:8080打开了。