[Spring Cloud Gateway] CORS 문제 해결하기

 

프로젝트 개발을 위해 프런트엔드 개발자 분과 협업을 하는 중에 이와 같이 중복으로 헤더가 생성되는 오류가 발생했습니다. 이를 해결하기 위해 CORS에 대해 간단하게 알고 가려고 합니다.

 

CORS(Cross-Origin Resource Sharing) 란?

CORS는 다른 출처의 자원을 공유하는 것을 허용하는 것입니다.

동일 출처 정책(same-origin policy)에 의해 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식이 적용되어 CORS를 통해 허용해 주어야 가능합니다.

다른 출처는 아래의 세가지 경우 정도로 생각할 수 있습니다.

• 프로토콜이 다른 경우(예시 : http/https)
• 도메인이 다른 경우
• 포트번호가 다른 경우

 

SOP(동일 출처 정책: Same-Origin Policy)

어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식

 

Spring Cloud Gateway에서의 CORS 설정

 

application.yaml

spring:
  cloud:
    gateway:
      default-filters:
        - DedupeResponseHeader=Access-Control-Allow-Origin Access-Control-Allow-Credentials
      globalcors:
        cors-configurations:
          '[/**]':
            allowedOrigins: 'http://localhost:3000'
            allow-credentials: true
            allowedHeaders: '*'
            allowedMethods:
              - PUT
              - GET
              - POST
              - DELETE
              - OPTIONS

 

Spring Cloud Gateway에서는

1. 클라이언트가 서버로 보내는 실제 요청 이전에 먼저 OPTIONS 메서드를 사용하여 preflight 요청을 보냅니다.
2. 그래서 allowedMethods에 OPTIONS를 설정해주어야 합니다.
3. preflight 요청을 통해 실제 요청 전에 서버가 요청을 수락할 수 있는지 확인합니다.
4. 확인을 완료한 뒤 실제 요청을 처리합니다.

이제 간단한 동작 원리를 알았으니 위에 오류에 대해 설명하려고 합니다.

간단하게 얘기하면 위에 오류는 Access-Control-Allow-Origin 헤더가 중복으로 발생해서 생기는 오류였습니다.

이 오류가 발생한 원인은 라우팅을 통해 다른 서버에 다녀오면 Access-Control-Allow-Origin 헤더가 또 발생하게 된 것입니다.

 

이 오류를 해결해주기 위해 해결 방법을 찾았습니다.

1. default filters를 설정
2. DedupeResponseHeader GatewayFilter Factory를 통해 특정 헤더 중복 제거

먼저 default-filters를 사용해 모든 라우팅 요청에 filters를 거치도록 해줍니다. 다음으로 DedupeResponseHeader를 통해 특정한 헤더의 중복 값이 있다면 제거해 주었습니다.

 

routes:
        - id: member-service
          uri: http://localhost:8081
          predicates:
            - Path=/member/**
          filters:
            - RewritePath=/member/(?<path>.*), /member/$\{path}

이제 기존의 Java를 통해 구성한 라우팅을 yaml 파일로 변경해서 작업해 주었습니다.

 

이 글은 아래의 문서를 참고하여 만들었습니다.

https://docs.spring.io/spring-cloud-gateway/docs/current/reference/html/#cors-configuration

Spring Cloud Gateway

https://cloud.spring.io/spring-cloud-static/spring-cloud-gateway/2.2.0.M1/#_default_filters

Spring Cloud Gateway

https://cloud.spring.io/spring-cloud-gateway/2.1.x/multi/multi__gatewayfilter_factories.html#_deduperesponseheader_gatewayfilter_factory

6. GatewayFilter Factories