[트러블슈팅][Spring] CORS 에러 해결, CORS 설정

 

---

안되는 이유는 모르겠고 되는 이유는 더더욱 모르겠을 때

---

 

 

CORS(Cross Origin Resource Sharing)

한 도메인 또는 웹페이지가 다른 도메인 간 리소스에 상호 액세스 할 수 있게 하는 보안 메커니즘이다.
CORS는 최신 브라우저에서 구현된 Same Origin Policiy(동일 출처 정책) 때문에 등장하게 되었다.

 

SOP(Same Origin Policy)

클라이언트가 동일한 출처 간의 리소스에만 접근할 수 있도록 제한하는 정책이다.

예시 : localhost:8080으로 열려있는 백엔드 서버와 ↔ localhost:5173 프런트 클라이언트가 Http 통신을 할 때 서로 다른 출처로 인식하여 CORS 에러를 만날 수 있다.

 

SOP는 왜 존재하는 걸까?

[SOP가 존재하지 않는다면 발생할 수 있는 문제]
  1. 한 사이트에서 로그인 후 받는 인증 토큰과 같은 유저 정보들이 쿠키, 로컬 스토리지와 같은 형태로 저장된다.
  2. 이후 다른 사이트에 접속해 요청을 보내도 사라지지 않고 해당 정보가 남아있다.
  3. 다른 사이트에서 보내는 요청은 유저의 인증 토큰이 자동으로 첨부되어 유저 정보가 탈취될 수 있다.

이러한 문제점을 방지하기 위해 각 클라이언트, 브라우저에는 SOP가 존재한다.

 

서버에서의 CORS 문제 해결

CORS 문제 해결은 일반적으로 서버에서 권한을 인가함으로써 해결한다.
아래의 예시는 스프링 부트 기준으로 작성되었다.

 

[WebConfig.java]

java

닫기 줄바꿈

@Configuration
public class WebConfig implements WebMvcConfigurer {
    public static final String ALLOWED_METHOD_NAMES = "GET,HEAD,POST,PUT,DELETE,TRACE,OPTIONS,PATCH";
 
    @Override
    public void addCorsMappings(final CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:5173")
                .allowedMethods(ALLOWED_METHOD_NAMES.split(","))
                .allowedHeaders("*")
                .exposedHeaders(HttpHeaders.LOCATION) // 리다이렉트에 사용하는 LOCATION 헤더 활성화
                .allowCredentials(true)
                .maxAge(10800);
    }
}

• addMapping : CORS를 적용할 URL 패턴을 정의한다.
• allowedMethods : 허용할 Http method를 지정한다.
• allowedHeaders : 클라이언트 측의 CORS 요청에 허용되는 헤더를 지정한다.
• allowedOrigins : 자원 공유를 허용할 출처를 지정한다.
  
  • * 는 전부 허용한다.

 

• exposedHeaders : 클라이언트 측 응답에서 노출되는 헤더를 지정한다.
  • HTTP는 CORS 요청에 대한 응답에서 Location 헤더에 접근할 수 있게 된다.
  • 이 Location 헤더에 대한 접근 설정은 일반적으로 클라이언트가 서버로부터 받은 리다이렉션 정보에 접근할 필요가 있을 때 사용한다.

 

• allowCredentials : 클라이언트 측에 대한 응답에 쿠키나 인증 헤더를 실을 여부를 지정한다.
  • true 로 설정하면 클라이언트 또한 요청에 credential을 포함해야 응답을 받을 수 있다.
  • credential 사용 시 응답의 * Access-Control-Allow-Origin header가 요청 원본과 명시적으로 일치하는지 확인한다.
    • Access-Control-Allow-Origin header: 브라우저에게 어떤 도메인의 JavaScript가 이 리소스에 접근할 수 있는지 확인하는 역할의 헤더이다.
      1. 특정 도메인에 접속한 클라이언트가 요청을 보낸다.
      2. 서버가 현재 유저가 보낸 요청을 확인 후 Access-Control-Allow-Origin header에 헤더값에 현재 유저가 접속한 특정 도메인을 입력해 응답을 보낸다. (해당 접속 도메인은 안전하다는 인증서를 보내는 셈)
      3. 브라우저는 응답 값을 통해 현재 도메인이 Access-Control-Allow-Origin header에 등록되어 있음을 확인한 후 JavaScript가 리소스에 접근할 수 있게 권한을 부여한다.
      4. 만약 Access-Control-Allow-Origin header 에 도메인이 등록되어 있지 않으면 JavaScript가 해당 리소스에 접근하는 것을 브라우저가 차단한다. (CORS 정책)

 

• maxAge : * pre-flight 리퀘스트를 캐싱할 수 있다. 1당 1분이다.
  • pre-flight 리퀘스트 : 크로스 오리진인 경우 브라우저가 자동으로 OPTIONS 메소드로 프리플라이트 리퀘스트를 보낸다. 즉, PUT, GET, POST 등 의 요청을 보내도 OPTION이라는 프리 플라이트 리퀘스트도 날아가기 때문에 1개의 요청을 위해 2개의 요청과 2개의 응답이 날아오는 셈이다.
  • maxAge는 이 요청을 캐싱 주기를 설정함으로써 일정 기간동안 동일한 요청에 대한 프리플라이트 리퀘스트를 재전송하지 않고 캐시 된 응답을 사용할 수 있다.

 

---