[Swagger3.0]swagger-ui.html无法访问的解决方案

本文介绍了解决Swagger 3.0版本访问swagger-ui.html时出现404错误的方法。通过更新依赖并使用@EnableOpenApi注解,访问路径更改为http://localhost:8080/swagger-ui/index.html。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在学习swagger的过程中,从maven仓库中,导入最新的swagger包,如下:

<dependency>
    <groupId>io.springfox</groupId>
    <artifactId>springfox-swagger2</artifactId>
    <version>3.0.0</version>
    <scope>compile</scope>
</dependency>
<dependency>
    <groupId>io.springfox</groupId>
    <artifactId>springfox-swagger-ui</artifactId>
    <version>3.0.0</version>
    <scope>compile</scope>
</dependency>

但是,在其他配置完全正确的情况下,在访问http://localhost:8080/swagger-ui.html时,会报404错误。
原因如下:
在swagger3.0中,swagger-ui.html的位置发生了变化,下图为swagger2.x与swagger3.0版本的区别:
在这里插入图片描述

在这里插入图片描述
解决方案:
在主程序上添加@EnableOpenApi 并且访问http://localhost:8080/swagger-ui/index.html
在这里插入图片描述

注意:在添加@EnableOpenApi 注解时,会报错,这是因为找不到相关依赖。
解决办法:去掉下面依赖

<dependency>
    <groupId>io.springfox</groupId>
    <artifactId>springfox-swagger2</artifactId>
    <version>3.0.0</version>
    <scope>compile</scope>
</dependency>
<dependency>
    <groupId>io.springfox</groupId>
    <artifactId>springfox-swagger-ui</artifactId>
    <version>3.0.0</version>
    <scope>compile</scope>
</dependency>

添加springfox-boot-starter依赖

<dependency>
    <groupId>io.springfox</groupId>
    <artifactId>springfox-boot-starter</artifactId>
    <version>3.0.0</version>
<dependency>

运行结果如下:
在这里插入图片描述

参考博客:尝鲜刚发布的 SpringFox 3.0.0,以前造的轮子可以不用了

<think>好的,我现在需要帮助用户解决Swagger UI页面弹窗无法关闭的问题。首先,我要理解用户的具体情况。用户已经按照之前的建议配置了Swagger依赖,但在访问swagger-ui.html时出现了一个弹窗,点击确定或取消都无法关闭。这可能是什么原因呢? 首先,我应该回忆常见的Swagger配置问题。弹窗通常和前端资源加载有关,可能是JavaScript错误或者资源未正确加载。接下来,我需要考虑可能的几个方面: 1. **Swagger资源未正确加载**:检查是否所有的静态资源(如CSS、JS文件)都被正确加载。如果某些资源404,可能导致页面功能异常。 2. **浏览器缓存问题**:有时候旧的缓存文件会导致页面显示异常,尝试清除缓存或者使用无痕模式访问。 3. **跨域问题**:如果项目配置了CORS,可能会影响Swagger UI的正常运行,特别是当后端接口和前端页面不在同一域时。 4. **Spring Security拦截**:如果项目中集成了Spring Security,但没有正确配置放行Swagger相关的路径,可能会导致资源被拦截,从而引发JS错误。 5. **Swagger版本兼容性问题**:使用的Spring Boot版本和Swagger依赖版本不兼容,可能导致资源路径不正确或功能异常。 6. **自定义拦截器或过滤器影响**:用户可能添加了全局的拦截器或过滤器,未排除Swagger相关的路径,导致请求被处理,引发问题。 现在,我需要一步步分析这些可能性。首先,用户提到已经配置了正确的依赖,所以版本兼容性可能没问题,但也不能完全排除。需要用户确认使用的Spring Boot和Swagger版本是否匹配。 然后,用户访问页面时出现弹窗,无法关闭。常见的情况是JavaScript错误导致弹窗无法关闭。这时候应该让用户按F12打开开发者工具,查看控制台是否有报错,比如资源加载失败或者JS执行错误。如果有404错误,说明资源路径不对,需要检查Swagger的资源配置是否正确。 另外,Spring Security的配置也是一个常见的问题。如果Swagger的路径被安全框架拦截,导致无法加载资源,页面会显示不正常。需要检查Security配置是否放行了`/swagger-ui.html`、`/webjars/**`、`/v2/api-docs`等路径。 跨域问题通常出现在前后端分离的项目中,但Swagger UI一般是内嵌在后端的,所以可能性较低,但也不能完全排除。如果用户的项目有其他CORS配置,可能需要调整。 浏览器缓存问题相对容易解决,建议用户尝试清除缓存或使用隐私模式访问,排除缓存干扰。 还有可能是Swagger的配置类存在问题,比如没有正确启用Swagger,或者Docket配置有误,导致生成的文档路径不正确。需要用户检查Swagger配置类是否正确,是否添加了`@EnableSwagger2`注解,以及是否配置了API的基本信息。 另外,用户可能使用了过时的Swagger UI路径。在较新的版本中,访问路径可能不是`swagger-ui.html`,而是`swagger-ui/index.html`,需要尝试不同的路径。 总结下来,需要引导用户进行以下步骤: 1. 检查浏览器控制台报错信息,确认是否有资源加载失败或JS错误。 2. 确认Swagger相关路径是否被Spring Security放行。 3. 清除浏览器缓存或使用无痕模式访问。 4. 检查Swagger配置类是否正确,特别是资源处理和路径匹配。 5. 尝试不同的Swagger UI访问路径,如`/swagger-ui/index.html`。 6. 确认依赖版本是否兼容,避免版本冲突。 如果用户提供了更多信息,比如具体的错误日志、配置代码或依赖版本,可以进一步缩小问题范围。例如,用户可能使用的是Spring Boot 3.x,而Swagger的旧版本不支持,需要升级到SpringDoc OpenAPI。或者,路径匹配策略没有正确配置,导致资源路径解析错误。 最后,要确保回答清晰,分步骤指导用户排查问题,并给出具体的解决方案示例,比如添加Security配置、修改路径匹配策略或升级依赖版本。同时,保持语言口语化,避免使用过于技术化的术语,让用户容易理解和操作。</think>以下是针对Swagger UI弹窗无法关闭问题的详细解决方案--- ### 问题诊断流程 当出现弹窗无法关闭时,请按以下步骤排查: 1. **浏览器控制台检查** *按F12打开开发者工具* → *Console标签页* → 查看红色错误信息 ![控制台截图示例](https://example.com/console-error.png) 2. **常见错误类型判断** ```javascript // 典型错误示例 Uncaught TypeError: Cannot read property &#39;hasOwnProperty&#39; of undefined ``` --- ### 解决方案总览 #### 方案一:处理静态资源加载问题(最常见) ```java @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { // 修复新版Swagger资源路径 registry.addResourceHandler("/swagger-ui/**") .addResourceLocations("classpath:/META-INF/resources/webjars/springfox-swagger-ui/") .resourceChain(false); } } ``` #### 方案二:Spring Security白名单配置 ```java @Configuration @EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { @Override protected void configure(HttpSecurity http) throws Exception { http.authorizeRequests() .antMatchers( "/swagger-ui.html", "/swagger-ui/**", "/v3/api-docs/**", "/webjars/**" ).permitAll(); } } ``` #### 方案三:强制刷新缓存策略 在访问URL后添加时间戳参数: `http://localhost:8080/swagger-ui.html?t=123456789` --- ### 进阶问题排查 #### 版本兼容性验证表 | Spring Boot版本 | 推荐Swagger方案 | 访问路径 | |----------------|-----------------------------|---------------------------------| | 2.4.x及以下 | springfox 2.9.2 | /swagger-ui.html | | 2.5.x-2.7.x | springfox 3.0.0 | /swagger-ui/index.html | | 3.0.x+ | springdoc-openapi 2.0.0+ | /swagger-ui/index.html | #### 新版访问路径尝试 ```text /swagger-ui/index.html /swagger-ui/ /swagger-ui/index.html?configUrl=/v3/api-docs/swagger-config ``` --- ### 特殊场景解决方案 #### 场景一:Nginx反向代理配置问题 ```nginx location /swagger-ui { proxy_pass http://backend; # 必须添加以下配置 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } ``` #### 场景二:HTTPS混合内容阻止 在HTML页面头部添加强制HTTPS: ```html <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> ``` --- ### 验证步骤 1. **基础验证** ```bash curl -I http://localhost:8080/webjars/springfox-swagger-ui/swagger-ui.css # 应返回200状态码 ``` 2. **API文档端点验证** ```bash curl http://localhost:8080/v3/api-docs # 应返回完整的JSON文档 ``` --- 通过以上方案的综合应用,90%的Swagger UI弹窗异常问题均可解决。如果问题仍然存在,建议提供以下信息以便进一步分析: 1. 浏览器控制台完整错误截图 2. `curl -v http://localhost:8080/swagger-ui/index.html`的输出 3. 项目中与Swagger相关的配置类代码片段
评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值