Lỗi về cors trong spring khi sử dụng ngrok

nguyenvannam · June 9, 2023, 3:09pm

Chào mọi người, hiện tại e đang làm 1 project về web đọc truyện thì có dựng xong phần API backend bằng springboot r, e sử dụng ngrok để tạo 1 domain cho front end gọi API thì gặp lỗi về Cors như trong ảnh

Khi e sử dụng domain là localhost thì có gọi đc API nhưng vs ngrok thì k được, e cũng thử cấu hình cors bên springboot nhưng k ăn nên giờ e kb là lỗi do mình cấu hình sai ở đâu, mong mọi người xem qua và cho e giải pháp, hay e nên deploy lên server thì có server free nào và cách để mình deploy backend lên đó ạ?
Em xin cảm ơn.
Dưới đây là code trong config của e:
File SecurityConfiguration.java:

@Configuration
@EnableWebSecurity
public class SecurityConfiguration {
	@Bean
	 SecurityFilterChain configure(HttpSecurity http) throws Exception {
	     http.csrf().disable()
	      .cors().and()
	         .authorizeHttpRequests()
	         .requestMatchers("/api/v1/login", "/api/v1/register", "/api/v1/resetPassword").permitAll()
	         .requestMatchers(HttpMethod.GET).permitAll()
	         .anyRequest().authenticated()
	         .and()
	         .logout()
	         .logoutRequestMatcher(new AntPathRequestMatcher("/api/v1/logout"))
	         .and()
	         .exceptionHandling()
	         .accessDeniedPage("/accessDenied");
	     return http.build();
	  }	
}

File Appconfig.java

@Configuration
@Profile("local")
@PropertySource("classpath:application-local.yml")
@Slf4j
public class ProdAppConfig {
 @Value("${server.port}")
 private String serverPort;
 
 @Bean
    PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }
 @Bean
    WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
         @Override
         public void addCorsMappings(CorsRegistry registry) {
          log.info("=======================");
          log.info("server port: " + serverPort);
          log.info("=======================");
          registry.addMapping("/**")
           .allowedOrigins("*")
           .allowedMethods("GET", "POST", "PUT", "DELETE", "PATCH")
           .allowedHeaders("*")
           .allowCredentials(false).maxAge(3600);
         }
        };
    }
}

file application-local.yml

server:
  port: 8800
spring:
   application:
      name: story
   data:
      mongodb:
        uri: mongodb://localhost:27017
        database: Story

File html test API

<!DOCTYPE html>
<html>
  <head>
    <title>Categories</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <h1>Categories</h1>
    <ul id="category-list"></ul>
    
    <script>
    fetch('https://7301-2402-800-61c7-1912-181f-8eaa-4a49-1d3e.ngrok-free.app/story/getAll')
    .then(response => response.json())
    .then(data => {
      console.log(data); 
      const categoryList = document.getElementById('category-list');
      console.log(categoryList); 
      data.content.forEach(story => {
        const li = document.createElement('li');
        const img = document.createElement('img');
        img.src = story.thumbnail;
        img.alt = story.storyName;
        li.appendChild(img);
        li.appendChild(document.createTextNode(story.storyName));
        categoryList.appendChild(li);
      });
    })
    .catch(error => console.error(error));
    </script>
  </body>
</html>