[Network] react sprignboot CORS

이전에 리액트 스프링부트 개발환경에서 cors 문제가 생겼었다. 그때 분명 공부했던건데, 지금 다른 웹을 개발하는 과정에서 번뜩 생각이 나지 않아 블로그에 남긴다.

CORS

cors는 Cross-Origin Resource Sharing의 약자로 브라우저의 보안정책이다. 각각의 다른 도메인이 리소스를 요청하려고 할떄 서버가 요청을 허용하지 않으면 발생하는 문제다. 예를들어 springboot의 기본 포트는 8080, 리액트는 3000이다.
로컬 환경에서 개발한다고 가정했을 때 localhost:3000 -> localhost:8080으로 요청을 보내게 되는데, 같은 오리진이 아니라서 요청을 보낼수가 없는것이다.
같은 localhost여도 접근이 안되는 이유는 도메인(domain)과 오리진(origin)은 다른 개념이기 때문이다.

• domain : example.com
• origin : https://example.com/PORT

'같은 오리진인 경우에만 요청할 수 있다' 는 뜻은 결국 PORT까지 일치해야 한다. 라는 뜻이고 결국 도메인은 오리진을 구성하는 하나의 요소이다.

동작 원리

기본적으로 웹 브라우저는 Same-Origin Policy정책을 따른다. 웹페이지가 실행된 도메인과 동일한 도메인에서만 리소스에 접근할 수 있도록 제한하는 보안 정책이다. http://sample.com에서 실행된 웹은 http://sample.com에서 제공하는 리소스에만 접근할 수 있는것이다.

해결 방법

해결 방법은 내가 알고 있는건 3가지다.

1. 프론트에서 proxy 서버를 사용해서 요청을 프론트 -> 프록시 -> 서버로 보낸다.
   • 이렇게 해결되는 이유는 서버 to 서버 요청간에는 cors가 발생하지 않기 때문에, 프록시가 미들웨어 역할을 해줌으로써 해결할 수 있다.
2. 서버에서 header에 Access-Control-Allow-Origin 을 header에 추가한다.
   • 서버에서 헤더에 Access-Control-Allow-Origin을 추가하면 이 요청은 허락한다. 는 의미이기 때문에 해결된다.
3. 서버에서 configuration을 이용해서 특정 오리진을 허용한다.
   • 이것또한 2번과 같은 원리이지만, WebMvcConfigurer를 활용해서 세부적인 정책을 설정할 수 있다.

나는 나중에 세부적인 정책 설정이 필요할 수도 있기 때문에 3번 방법으로 해결했다.

@Configuration
public class WebConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOrigins("http://example.com");
            }
        };
    }
}

서버에서 위 코드로 설정해주고, 다시 브라우저를 새로고침 하면, 아래와 같이 에러 없이 데이터가 잘 온다.