[Network] CORS란? Cross-Origin Resource Sharing / CORS 에러, Spring Boot

CORS 에러

위와 같은 에러를 만나본 적이 있을 것이다. 아무런 설정 없이 프론트엔드 서버에서 백엔드 API 서버로 요청을 보냈을 때 발생 할 수 있다. 여기서 "has been blocked by CORS policy"라는 문장이 눈에 띈다. CORS 정책에 의해 blocked 되었고, Access-Control-Allow-Origin header가 없으니까 체크해 보라고 한다.

CORS 정책이 무엇이고, 왜 이런 에러가 발생했는지 알아보자.

 

CORS란?

---

CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)는 한마디로 서버와 동일한 도메인이 아닌, 다른 도메인에서 자원에 접근할 수 있도록 허용하는 것을 말한다.

기본적으로 웹 브라우저는 SOP(Same-Origin Policy, 동일 출처 정책)을 따른다. 이는 리소스가 동일한 도메인에서만 요청되고 사용될 수 있도록 제한하기 위한 보안 메커니즘이다.

---

출처(Origin)란?

교차 출처에서 출처는 Origin의 번역 표현이다. Origin은 Protocol + Host + Port를 의미한다.

ex) http://innovation.com:8080/path/1

• Protocol: http
• Host: innovation/com
• Port: 8080

따라서 위의 3개 중 하나라도 다르면 다른 출처라고 본다.

---

교차 출처(Cross-Origin)란?

출처가 교차한다는 것은 리소스를 주고받으려는 서로 다른 출처를 의미한다. 

http://localhost:8080과 http://localhost:5000/global은 서로 다른 출처이다. 별다른 CORS 설정 없이 서로 다른 출처에서 리소스를 주고받으려고 하니, Same-Origin Policy에 따라 요청이 제한된 것이다.

---

왜 SOP가 기본일까?

과거에는 프론트엔드와 백엔드를 구분하지 않고, 하나의 서버에 구성해서 같은 도메인 내에서 모든 처리를 하도록 했다. 따라서 다른 출처로 요청을 보내는 것 자체가 의심스러운 행위로 보일 수밖에 없었다. 따라서 SOP가 기본 정책이었던 것이다. 

그러나 요즘엔 프론트엔드와 백엔드를 나누고 다른 도메인에 둔 뒤, 클라이언트에서 API를 호출하는 방식이 당연해졌다. 따라서 클라이언트와 API 서버가 분리되어 있고, 다른 도메인에 있는 경우가 많다. 따라서 다른  출처와 요청과 응답을 주고받을 수 있도록 서버에 리소스 호출이 허용된 출처(Origin)을 명시해 주는 방식으로 이 문제를 해결하기로 했고, 이를 CORS 정책이라고 한다.

 

CORS 설정

---

CORS를 설정한다는 것은, 출처가 다른 서버 간의 리소스 공유를 허용한다는 것이다. 즉, 기본 설정이자 다른 출처간의 리소스 공유를 제한하는 SOP 대신 다른 출처간의 리소스 공유를 허용하는 CORS 정책으로 설정하겠다는 것이다.

 

서버 측에서 직접 Access-Control-Allow-Origin 헤더를 설정하는 방법과 프록시 서버를 사용하는 방법으로 SOP 정책 대신 CORS 정책을 설정할 수 있다.

---

서버 측 설정 방법

서버에서 Access-Control-Allow-Origin 헤더를 설정해서, 요청을 허용할 출처를 명시적으로 지정할 수 있다. 

즉, "A라는 출처로부터 들어오는 요청을 허용하겠다"라고 지정해 주는 것이다. 이 헤더를 세팅하면 출처가 다르더라고 특정 출처로부터의 요청을 허용하게 된다.

---

프록시 서버를 사용하는 방법

웹 애플리케이션이 리소스를 요청하는 대신, 프록시 서버를 사용해서 리소스와 동일한 출처에서 요청을 보낸 것처럼 설정해서 CORS 에러를 방지할 수도 있다.

프록시 서버: 클라이언트는 프록시 서버로 요청을 보내고, 프록시 서버는 그 요청을 API 서버로 전달 후 응답을 받아서 클라이언트로 전달하는 방식이다. 중개 역할을 하는 것이다. 

---

Spring Boot 설정

서버 측 설정 방법을 Spring Boot Project에서 적용하는 방법이다.

@Configuration을 통해 Access-Control-Allow-Origin 헤더를 설정해 준다.

• addCorsMappings: WebMvcConfigurer의 메서드이다.
• addMapping(): 특정 path(uri)에 대한 CORS 설정 적용
• allowedOrigins(): 리소스에 접근을 허용할 출처(Origin)를 명시적으로 설정
• allowedMethods(): 허용할 HTTP Method를 지정
• maxAge(): 브라우저가 CORS 설정을 캐시 할 수 있는 최대 시간을 지정

@Configuration
public class CorsWebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://some-origin:8080", "http://some-origin:3000")
                .allowedMethods("GET", "POST", "DELETE", "PUT")
                .maxAge(3000);
    }
}

 

위의 Config를 추가해 주면, 특정 출처로부터의 CORS 정책을 설정할 수 있다.

 

참고

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Cross-Origin Resource Sharing (CORS) - HTTP | MDN