❄️

Cors 에러야 왜나니?

모든 URL 에 시큐리티로 제한 → 따라서 시큐리티가 필요하지 않는 부분은 열어줘야함.

config/WebConfig.java


@Override
public void addCorsMappings(CorsRegistry registry) {
  registry
    .addMapping("/**")
    .allowedOrigins(
      this.security
        .getCors()
        .getOrigin()
    )
    .allowedMethods("*");
}


cors:
  origin:
    - http://localhost:3000
    - http://127.0.0.1:3000
    - https://monthsub.netlify.app
allows:
  - /assets/**
  - /h2-console/**
  - /v3/api-docs/**
  - /swagger-monthsub.html
  - /swagger-ui/**
# endpoint
- /health
  - /users/login
  - /users/signup
  - /series/sort
  - /series/{id}

허용 도메인과 허용 엔드포인트 열어줘야함.

이렇게 하면 될까?

인증이 필요하지 않은 API들은 정상적으로 작동한다.

하지만! 토큰을 넣는 API에서는 안된다.

프론트에서 POST 요청을 보내지만 콜스에러로 인해 OPTIONS로 들어온다.

CloudWatchLog를 확인해본다.

💙

해결 방법

SecurityConfig.java에서도 cors 처리를 해줘야 한다.


.cors()
.configurationSource(corsConfigurationSource())


@Bean
public CorsConfigurationSource corsConfigurationSource() {
  CorsConfiguration configuration = new CorsConfiguration();

  Arrays.stream(this.security.getCors()
      .getOrigin())
    .toList()
    .forEach(configuration::addAllowedOrigin);
  configuration.addAllowedHeader("*");
  configuration.addAllowedMethod("*");
  configuration.setAllowCredentials(true);

  UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
  source.registerCorsConfiguration("/**", configuration);
  return source;
}