CORS Policy 에러

프론트 측에서 새로운 ip 값에 대해 cors를 추가해달라고 요청했다.

 

매우 간단한 작업이여서 바로 uri에 추가한다음, 넣었다고 말했다. 그런데도, 여전히 cors 오류가 발생했다.

public void addCorsMappings(final CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                .allowedOrigins("https://feedzupzup.com") // 추가한 주소
                .allowedOrigins("https://api.feedzupzup.com") // 추가한 주소2
                .allowedMethods("GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true);

 

분명히 허용할 origin을 넣었는데, 안 된다...

 

사실 상단의 메서드에는 문제점이 있다. allowedOrigins 메서드를 잘 살펴보자.

public CorsRegistration allowedOrigins(String... origins) {
    this.config.setAllowedOrigins(Arrays.asList(origins));
    return this;
}

 

origins에 set을 한다. 진짜 어이가 없다. 당연히 메서드 체이닝으로 여러 개의 값이 들어갈 줄 알았는데, set을 한다ㅋㅋ... set을 하니 마지막 uri(https://api.feedzupzup.com)만 cors에 등록이 되어 오류가 발생했던 것.

 

public void addCorsMappings(final CorsRegistry registry) {
    registry.addMapping("/**")
            .allowedOrigins(
                    "http://localhost:3000",
                    "https://feedzupzup.com"
            )

 

그래서 위와 같은 문법으로 바꿔줘야 한다.

 

이렇게 하면 끝나는 문제였지만, 삽질을 좀 오래했다. 아래에는 삽질한 내용을 추가로 정리하려고 한다.

---

혹시... Nginx 문제 아닐까?

 

혹시 Nginx에서도 CORS 설정을 해야할까 싶어서 nginx conf.d 파일에 CORS 설정을 추가로 해봤다.

    # HTTPS 메인 서버
    server {
        listen 443 ssl;
        server_name api.feedzupzup.com;

        # 기본 보안 헤더
        add_header X-Frame-Options DENY;
        add_header X-Content-Type-Options nosniff;

        add_header 'Access-Control-Allow-Origin' 'https://feedzupzup.com' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, PATCH, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, X-Requested-With' always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;

        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' 'https://feedzupzup.com';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, PATCH, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, X-Requested-With';
            add_header 'Access-Control-Max-Age' 86400;
            return 204;
        }

 

다른 오류가 발생했었는데, 아마 이런 오류였던것으로 기억한다. (정확하진 않음)

Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’

 

해당 오류의 이유: Nginx와 WAS 두 군데에서 CORS Header를 설정하면 안 돼!

 

팀원이 본인 과거 프로젝트에서는 Nginx, WAS 두 서버에서 CORS 설정을 중복해서 해도 오류가 발생하지 않았다고 했는데, 왜 오류가 발생했을까?

 

 

Spring Security에서는 CORS 헤더 중복을 회피한다

 

Spring Security에서는 자체적인 corsFilter를 가지고 있다. 그리고 해당 메서드는 추가적인 CORS 헤더가 중복으로 설정되지 않도록 내부적으로 처리해준다.

 

그리고 우리 피드줍줍팀에서는 Spring Security를 도입하지 않았기에 Nginx , SpringBoot(WAS) 각각에서 CORS 설정을 하니 중복되는 CORS 헤더로 인해 오류가 발생했던 것!

---

CORS에 대한 이해도가 부족했고, 우선 오류를 해결해야겠다는 마음에 급급해 시간이 오래 걸렸던 것 같다. 

 

결론: 단순한 통로 역할을 하는 Nginx에서는 CORS 설정을 할 필요가 없고, 해당 요청을 처리하는 WAS 서버에서 CORS 설정을 해야한다. 그리고 spring에서 제공해주는 메서드 잘 확인해보자ㅎ..