Springboot: Swagger UI format is not displayed properly in AWS

Question

I have a simple spring boot application with two controllers echo-controller and trac-controller. I wanted to have a api documentation for these services end points. I am trying to do with swagger ui 2.6.1 with spring boot version: 1.5.2.RELEASE

In the pom.xml file i have these dependencies added

<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 is displaying properly in local (http)

But when i deployed it in AWS (https), the html format goes off. I tried many ways but not able to figure out why the html format goes off in AWS.

Answer 1

From the screenshot it Looks like your CSS / JS isn't loading. Please check your browser log to see what URL is used to make the request and setup the httpSecurity to allow those resources to load similar to your existing security roles.

Also Ensure below things.

1.swagger is configured something like below.

@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.try to clean Chrome Web Browser cache.