23.07.19) CORS 에러 해결

HTTPS로 배포하고 CI/CD로 구축 후 프론트엔드 분들과 연결해봤다.

연결하자마자 발생한 CORS에러. 난생 처음 보는 에러에 어떻게 해야 할 지 감조차 잡히지 않았다.

남은 시간은 2일. HTTPS배포와 CI/CD 파이프 라인 구축하는데 시간을 너무 많이 쓴 바람에 늦어졌다.

처음 발생한 에러에 이해하고 해결하기엔 시간이 너무 촉박했다.

그렇게 구글링을 하며, 해결방안을 여러 방면으로 시도를 했다.

상위 레벨인 Application에 @CrossOrigin 달아주기

프로젝트에서 다른 패키지들보다 상위 레벨인 Application의 main 메서드에 @CrossOrigin을 달아줌으로써, 서버가 시작 될 때 포트 권한을 열어주는 것이다. 이 방법은 테스트할 때를 제외하곤 열어두면 안될듯 싶다.

public class BlogProjApplication {
	@CrossOrigin
	public static void main(String[] args) {

		SpringApplication.run(BlogProjApplication.class, args);
	}

}

똑같이 CORS에러 발생..

컨트롤러에 직접 @CrossOrigin 애노테이션 달아주기

@PostMapping("/post")
@CrossOrigin
public PostResponseDto createPost(@RequestBody PostRequestDto requestDto, HttpServletRequest req) {
    return postService.createPost(requestDto, req);
}

 

문제 발생과 해결

GetMapping에서 다시 CORS에러가 났다.. 다시 어리둥절 하고 있을 때, 같은 백엔드 팀원분이 이 방법을 한번 해보자고 추천해줬다.

방법은 config 패키지에 CorsConfig 클래스를 만들어 설정을 해주는 것이였다.

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("Origin", "Content-Type", "Accept")
                .allowCredentials(true)
                .maxAge(3600);
    }

하지만 실패.. 시간이 부족하다 느껴 해결 방법을 복붙하다 보니 어디서 문제가 발생하는지 끙끙 앓고 있을 때, 빛처럼 경험자 분이 오셔서 도움을 주셨다. 백엔드와 프론트엔드쪽의 코드를 보며 문제점을 바로 찾아내셨다. 프론트에서 쿠키를 검증하는 로직이 있는데 그것으로 인해 문제가 발생 했던 것. 그 부분을 지우고 돌렸더니 드디어 해결!! 처음에 API 명세를 작성할 때 백엔드 쪽에서 쿠키를 넘겨준다 해서 그에 맞게 프론트 쪽이 로직을 추가 했었던 것. 하지만 우리쪽에서 구현이 늦어지니 프론트쪽에서 구글 세션 방식으로 로그인 기능을 대신했다. 빛 프론트님들.. 
그렇게 해결이 되고 경험자 분이 피드백을 주셨는데 이렇게 하는 것보다

@Override
public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
            .allowedOrigins("*")
            .allowedMethods("*")
            .allowedHeaders("*");
}

이 방법은 언제나 모든 포트를 열어주는 것이니 배포하는 서비스라면, 배포하고 배포한 url에게만 포트를 열어주는 방식으로 수정해야 된다고 알려주셨다.