24.01.16)TIL

프론트 부분을 React로 만들면서 백엔드와 프론트를 연결하려다보니 서로 포트번호가 달라 CORS 문제가 생겼다.

"Cross-Origin Resource Sharing" (CORS)는 웹 애플리케이션에서 리소스에 대한 HTTP 요청이 다른 도메인에서 온 경우를 다루는 보안 메커니즘입니다. 웹 브라우저는 보안상의 이유로 동일 출처 정책을 적용하여, 동일한 출처에서 온 요청만 허용합니다. 이 정책은 일반적으로 다른 도메인의 API에 접근하려는 경우에 문제가 됩니다.

 

해결하기 위한 여러가지 방법이 있었지만, 빈으로 등록해 백엔드에 있는 모든 API가 프론트에 접속하게 했다.

@Configuration
public class WebConfig implements WebMvcConfigurer {

  @Override
  public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
        .allowedOrigins("http://localhost:3000") // 허용할 출처
        .allowedMethods("GET", "POST", "PUT", "PATCH", "DELETE") // 허용할 HTTP method
        .allowCredentials(true) // 쿠키 인증 요청 허용
        .maxAge(3000); // 원하는 시간만큼 pre-flight 리퀘스트를 캐싱
  }
}

 

CorsRegistry를 사용하기 위해 WebMbcConfigurer를 implement 해서 addCorsMappings라는 메서드를 오버라이드했다.

 

이렇게 설정하니 접속이 가능했다.

 

그러나 오늘 로그인 부분 프론트를 만들면서 서버로 부터 헤더를 받지 못하는 문제가 발생했다. 팀원에게 물어 cors 설정에 헤더를 추가하는 설정이 없다는 것을 알게 되어서 아래와 같이 추가했다.

@Configuration
public class WebConfig implements WebMvcConfigurer {

  @Override
  public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
        .allowedOrigins("http://localhost:3000") // 허용할 출처
        .allowedHeaders("*") // 추가된 부분
        .allowedMethods("GET", "POST", "PUT", "PATCH", "DELETE") // 허용할 HTTP method
        .allowCredentials(true) // 쿠키 인증 요청 허용
        .exposedHeaders(JwtUtil.Access_Header) // 추가된 부분
        .exposedHeaders(JwtUtil.Refresh_Header) // 추가된 부분
        .maxAge(3000); // 원하는 시간만큼 pre-flight 리퀘스트를 캐싱
  }
}

 

헤더와 관련된 설정을 해주니 토큰 값이 제대로 들어왔다.

근데 1개만 들어왔다. access와 refresh 2개의 토큰을 사용하는데 refresh 토큰만 들어오는 이상한 일이 생겼다.

튜터님과 팀원과 프론트쪽에 console.log를 여기저기 찍으며 찾아봤고, 아래와 같이 해결했다.

.exposedHeaders(JwtUtil.Refresh_Header, JwtUtil.Access_Header)

public CorsRegistration exposedHeaders(     
	String... headers )

exposeHeaders는 가변인자라 여러개의 매개변수를 가지는데, expostHeaders를 2개를 설정해 놓으니 뒤에 넣은 값이 앞에 것을 없애버려서 이러한 문제가 발생했다.