[TIL]이노베이션 캠프 37일차

 

미니프로젝트 주차 9.2(금) ~ 9.8(목)

팀 프로젝트: 주제, Scope 자유, 프론트엔드와 첫 협업 프로젝트

 

진행 계획

- 2일(금) 기획, 와이어 프레임 작성, API 명세서 작성, ERD 작성, 와이어 프레임 작성, S.A.작성, 기능 역할 분담

- 3일(토) S.A. 서면 피드백 -> 피드백 결과 반영, ERD 관련 회의

- 4일(일) 기능 구현을 위한 개인 공부

- 5일(월) 팀 과제 코드 작성 프론트엔드와 연결 확인

- 6일(화) 팀 과제 코드 작성

- 7일(수) 팀 과제 코드 작성 프론트엔드 서버와 연결

- 8일(목) 팀 과제 코드 최종 취합 및 AWS 배포

 

 

 

1. 개발 진행 상황

1) CORS 설정 추가

 

@Configuration // 스프링이 기동 될 때 먼저 읽는 설정 파일
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {

    @Override // addCorsMappings 메소드 오버라이드
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("http://localhost:3000", "http://dailyylife.s3-website.ap-northeast-2.amazonaws.com/")
                .allowedMethods("GET", "POST", "PUT","DELETE","HEAD","OPTIONS")
                .exposedHeaders("*")
                .allowedHeaders("*")
                .allowCredentials(true)

                .maxAge(3600);
        // 경로 패턴 설정, 리소스 공유 허용 할 Origin(출처), 허용할 메소드, 프리플라이트 리퀘스트 캐싱 시간(초)설정
    }
}

@Configuration
@EnableWebSecurity
@RequiredArgsConstructor
@ConditionalOnDefaultWebSecurity
@ConditionalOnWebApplication(type = ConditionalOnWebApplication.Type.SERVLET)
public class SecurityConfiguration {

  @Value("${jwt.secret}")
  String SECRET_KEY;
  private final TokenProvider tokenProvider;
  private final UserDetailsServiceImpl userDetailsService;
  private final AuthenticationEntryPointException authenticationEntryPointException;
  private final AccessDeniedHandlerException accessDeniedHandlerException;

  @Bean
  public PasswordEncoder passwordEncoder() {
    return new BCryptPasswordEncoder();
  }

  @Bean
  @Order(SecurityProperties.BASIC_AUTH_ORDER)
  public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
    http.cors();
    http.headers().frameOptions().disable();

    http.csrf().disable()

        .exceptionHandling()
        .authenticationEntryPoint(authenticationEntryPointException)
        .accessDeniedHandler(accessDeniedHandlerException)

        .and()
        .sessionManagement()
        .sessionCreationPolicy(SessionCreationPolicy.STATELESS)

        .and()
//            권한없이 (=토큰없이) 이용가능한 api설정
        .authorizeRequests()
        .antMatchers("/api/user/**").permitAll()
        .antMatchers("/api/post").permitAll()
        .antMatchers("/api/comment").permitAll()
        .antMatchers("/h2-console/**").permitAll() // h2-console 사용을 위해 추가
        .requestMatchers(CorsUtils::isPreFlightRequest).permitAll() // preflight 허용을 위해 추가
        .anyRequest().authenticated()

        .and()
        .apply(new JwtSecurityConfiguration(SECRET_KEY, tokenProvider, userDetailsService));

    return http.build();
  }
}

 

 

2. 개발 중 발생한 이슈와 해결

1) 프론트엔드에서 헤더에 토큰이 안보여지는 문제

해결: WebConfig에 exposeHeaders 설정 추가

 

2. 게시글 수정, 삭제 시 CORS 관련 403 에러

해결: WebConfig에 설정을 잘되어있었는데 에러가 발생했고 webSecurityConfig 쪽도 수정이 필요하다는 것을 알게됨 PreFlight가 토큰(권한) 없이 이용 가능하게끔 설정 함

 

3. 오늘 한 일 / 회고

CORS관련 코드 넣고 프론트엔드랑 연결 확인 됐을 때 오? 이게 어떻게 되는거지? 하며 마냥 좋아했었는데

그게 전부가 아니였다. 추가로 설정해야할 것들이 아주 많이 있었는데, 그걸 인지하지 못했을 뿐...

백엔드에서는 포스트맨 테스트해보면 다 잘된다.. 프론트엔드에서 에러가 발생하면 CORS 관련 에러가 99%라.. 어떤 것을 허용해줘야 할지 찾는게 내가 할 일이다.

 

 

4. TO-DO LIST

- CORS 공부를 더 해야한다.