Springboot：Swagger UI 格式在 AWS 中显示不正确

Posted 2023-03-05

【中文标题】Springboot：Swagger UI 格式在 AWS 中显示不正确

【英文标题】：Springboot: Swagger UI format is not displayed properly in AWS

【发布时间】：2019-04-12 19:41:42

【问题描述】：

我有一个简单的 Spring Boot 应用程序，其中包含两个控制器 echo-controller 和 trac-controller。我想为这些服务端点提供一个 api 文档。我正在尝试使用 swagger ui 2.6.1 与 Spring Boot 版本：1.5.2.RELEASE

在pom.xml 文件中我添加了这些依赖项

<dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>2.6.1</version>
            <scope>compile</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-config</artifactId> 
            <version>4.0.1.RELEASE</version>        
    </dependency>
     <dependency>
            <groupId>org.springframework.security</groupId>
             <artifactId>spring-security-web</artifactId>
            <version>4.0.1.RELEASE</version>
        </dependency>

Below is my echo controller

        @Controller
    public class EchoController    

        @ApiOperation(value="Test Echo Service",response=ResponseEntity.class)
        @ApiResponses(value=
           @ApiResponse(code=200,message="Test Echo Service Retrieved",response=ResponseEntity.class),
           @ApiResponse(code=500,message="Internal Server Error"),
           @ApiResponse(code=404,message="Test Echo Service not found")
        )
        @RequestMapping(value = "/echo/any", method = RequestMethod.GET)
        @ResponseBody
        public String echo(@PathVariable("any") String any) 
            return any;
        
    

    similar annotation i have for trac-contoller endpoints as well.

    Below is my swagger config file

    @Configuration
    @EnableSwagger2
    public class SwaggerConfig 

        @Bean
        public Docket produceApi()
        return new Docket(DocumentationType.SWAGGER_2)    
        .apiInfo(apiInfo())    
        .select()
        .apis(RequestHandlerSelectors.basePackage("com.demo.applications.trac.controller"))
        .paths(PathSelectors.any())       
        .build();
    
    // Describe  apis
    private ApiInfo apiInfo() 
        return new ApiInfoBuilder()
        .title("TRAC MicroService Rest APIs")
        .description("This page lists all the rest apis for TRAC MicroService.")
        .version("1.0-SNAPSHOT")    
        .build();
    
    

    Below is a Security config

    @Configuration
    class SecurityConfig extends WebSecurityConfigurerAdapter 

        private static final String[] AUTH_WHITELIST = 

                // -- swagger ui
                "/swagger-resources/**",
                "/swagger-ui.html",
                "/v2/api-docs",
                "/configuration/ui",
                "/swagger-resources/configuration/ui",
                "/swagger-resources/configuration/security",
                "/configuration/security",
                "/webjars/**",
                "/swagger.json",
                "/csrf",
                "/webjars/springfox-swagger-ui",
                "/webjars/springfox-swagger-ui/css",
                "/webjars/springfox-swagger-ui/images",
                "/echo/**",            
                "/trac-service/**"

        ;

        @Override
        protected void configure(HttpSecurity http) throws Exception 
            http.authorizeRequests()       
                    .antMatchers(AUTH_WHITELIST).permitAll()
                    .antMatchers("/**/*").denyAll();
        
        @Override
        public void configure(WebSecurity web) throws Exception 
            web.ignoring().antMatchers("/v2/api-docs", "/configuration/ui", "/swagger-resources", "/configuration/security", "/swagger-ui.html", "/webjars/**","/webjars/springfox-swagger-ui/css","/webjars/springfox-swagger-ui/images");
        

    

Swagger ui 在本地 (http) 中正确显示

但是当我在 AWS (https) 中部署它时，html 格式会消失。我尝试了很多方法，但无法弄清楚为什么 html 格式在 AWS 中消失了。

【问题讨论】：

当您点击localhost:8080/your_context/swagger-ui.html 时是否所有内容都正确显示？请根据您的配置调整此网址。

另外，您是在 AWS 中部署到 Elastic BeanStalk 还是只是在您自己的应用服务器/servlet 容器上运行 EC2 实例？

@Arun Patra ，当我点击本地时，一切都会正确显示。我正在部署到 EC2 实例。我正在使用 docker 文件。

你可以使用chrome中的inspect功能并尝试找出浏览器无法下载的确切资源吗？

【参考方案1】：

从屏幕截图看来，您的 CSS / JS 没有加载。请检查您的浏览器日志以查看用于发出请求的 URL 并设置 httpSecurity 以允许加载这些资源，类似于您现有的安全角色。

还要确保以下事项。

1.swagger 配置如下。

@Configuration
@EnableWebSecurity
@EnableWebMvcSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter 
    @Override
    protected void configure(HttpSecurity http) throws Exception 
        http
            .authorizeRequests()
            .antMatchers("/v2/api-docs", "/swagger-resources/**", "/webjars/**", "/swagger-ui.html")
            .permitAll();
    

2.尝试清理 Chrome 网络浏览器缓存。

【讨论】：

你是对的，CSS / JS没有加载所有swagger css都无法加载。下面是来自浏览器的控制台输出，资源被解释为样式表，但使用 MIME 类型 application/octet-stream 传输：

请参阅***.com/questions/22631158/…和***.com/questions/41734976/…