I am currently learning and developing a small project. I integrated Knife4j’s enhanced interface documentation into the project, but I encountered a problem at the moment. I will explain my problem and the dependency version information of the backend program and the frontend program in the following points.

1. Problem

  app.c31badf5.js:1 SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
    at JSON.parse (<anonymous>)
    at Object.json5parse (app.c31badf5.js:1:364220)
    at r.transformResponse (app.c31badf5.js:1:196382)
    at chunk-vendors.d51cf6f8.js:2:2003275
    at Object.u [as forEach] (chunk-vendors.d51cf6f8.js:2:2005150)
    at e.exports (chunk-vendors.d51cf6f8.js:2:2003248)
    at chunk-vendors.d51cf6f8.js:2:1328322

2. Java Program

• Main dependencies

       <!-- SpringBoot config-->
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-dependencies</artifactId>
                <version>3.3.5</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>

     <!-- knife4j-doc -->
            <dependency>
                <groupId>com.github.xiaoymin</groupId>
                <artifactId>knife4j-openapi3-jakarta-spring-boot-starter</artifactId>
                <version>${knife4j.doc.version}</version>
            </dependency>

• ConfigurerFile
  • application.yml

   springdoc:
     api-docs:
        path: /v3/api-docs
     swagger-ui:
        enabled: true
        path: /swagger-ui.html
        tags-sorter: alpha
    group-configs:
      - group: 'default'
        display-name: 'Test Model'
        paths-to-match: '/**'
        packages-to-scan: com.prosys.web.controller.tool
  

  • WebConfig(implements WebMvcConfigurer)

      @Override
      public void addResourceHandlers(ResourceHandlerRegistry registry) {
  
      // Add static resource mapping rules     
      registry.addResourceHandler("/static/**")
              .addResourceLocations("classpath:/static/");
      //Configure the static resource request mapping address of knife4j
      registry.addResourceHandler("/doc.html")
              .addResourceLocations("classpath:/META-INF/resources/");
      registry.addResourceHandler("/webjars/**")
              .addResourceLocations("classpath:/META-INF/resources/webjars/");
     }
  

  • SecurityConfig

  public static final String[] EXCLUDE_INTERFACE_PATHS = {"/login", "/register", "/captchaImage"};
  public static final String[] STATIC_SHADER_RESOURCES = {"/", "/*.html", "/**.html", "/**.css", "/**.js", "/profile/**"};
  public static final String[] STATIC_RESOURCES_MAPPING_PATH = {"/doc.html", "/swagger-ui.html", "/v3/api-docs/**", "/swagger-ui/**","/swagger-resources/**", "/webjars/**", "/druid/**"};
  
  protected SecurityFilterChain filterChain(HttpSecurity httpSecurity) throws Exception {
      return httpSecurity.authorizeHttpRequests((requests) -> {
                  permitAllUrl.getUrls().forEach(url -> requests.requestMatchers(url).permitAll());
                  // For login login registration register verification code captchaImage allow anonymous access
                  requests.requestMatchers(EXCLUDE_INTERFACE_PATHS).permitAll()
                          // Static resources, anonymous access
                          .requestMatchers(HttpMethod.GET, STATIC_SHADER_RESOURCES).permitAll()
                          .requestMatchers(STATIC_RESOURCES_MAPPING_PATH).permitAll()
                          // All requests except the above require authentication
                          .anyRequest().authenticated();
              })
  }
  

  • Knife4jDocConfig

      @Bean
      public OpenAPI customOpenApi()
      {
         return new OpenAPI().components(new Components()
          // Set the authentication request header
          .addSecuritySchemes("apikey", securityScheme()))
          .addSecurityItem(new SecurityRequirement().addList("apikey"))
          .info(getApiInfo());
      }
  
      @Bean
      public SecurityScheme securityScheme()
      {
         return new SecurityScheme()
          .type(SecurityScheme.Type.APIKEY)
          .name("Authorization")
          .in(SecurityScheme.In.HEADER)
          .scheme("Bearer");
      }
      public Info getApiInfo(){
      new Info().title("interface api")
                .description("This is an interface document for testing the interface")
                .contact("anshink")
                .version("Version:1.0.0");
      }
  

3. Web Program

Main dependency: "vue": "3.4.31",