아 제발요,,, 뭐가 문젠데 이렇게 빨간 에러를 뱉는거에요...

---

프로젝트를 진행하며 백엔드 서버는 순수한 API 서버로서의 기능을 담당하게 하고자 프론트엔드와 백엔드 서버를 분리해서 구축하게 되었다. 그 과정에서 각각 서버에 크로스 도메인을 적용했는데, 프론트엔드 서버에서 백엔드 서버에 API 호출 시 발생했던 CORS 문제에 대해 기록하고자한다.

---

우선 프로젝트를 진행하며 프론트엔드 서버의 도메인은 www.withmuma.com 백엔드의 도메인은 api.withmuma.com 으로 설정해두었다.

CORS 에러는 위와 같이 크로스 도메인을 사용하게되면 서로 다른 서버에서 요청하는 것으로 서버단에서 응답은 정상적인 상태코드로 200을 반환하지만, 브라우저 에서 차단한다.

CORS (Cross-Origin Resource Sharing) 이란?

CORS는 Cross-Origin Resource Sharing의 줄임말로, 서로 다른 출처간의 리소스를 공유하기위한 정책이다.
CORS를 이해하기 위해서는 몇가지 개념의 이해가 필요한데, 차근차근 알아보자

출처(Origin)

출처가 다르다는 것은 무슨 의미일까?

우리가 URL은 단순한 문자열로 생각하고 사용하지만, 사실은 URL에는 여러개의 구성요소로 구성되어 있다.

URL은 기본적으로 위와 같이 구성되어 있다.
우리가 오늘 확인해야할 부분은 크게 3가지이다.

• Protocol
• Host
• Port

위 세가지를 합친 URL을 출처(Origin)이라고 생각하면 된다.

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

동일 출처 정책 줄여서 SOP라고 한다.
SOP는 동일한 출처에서만 리소스를 공유할 수 있다. 라는 기본적인 룰을 가지고 있다.

즉, 위에서 설명한 출처(Origin)가 다르다면 리소스를 공유할 수 없게된다.

우리가 여러번 사용했던 OpenAPI는 자유롭게 호출했었는데, 불편하게시리 SOP가 필요한 이유가 뭘까?

SOP 정책이 없다면 해커가 CSRF(Cross-Site Request Forgery) 또는 XSS(Cross-Site Scripting) 등의 방법을 이용해 클라이언트의 브라우저 상에서 해커의 코드가 실행되어 클라이언트의 정보를 가로챌 수 있게된다.

이처럼 클라이언트와 서버의 의도와 달리 해커에 의해 스크립트가 실행되는 것을 방지하기 위해서 SOP 정책을 브라우저에 적용해서 브라우저에서 사전에 방지하게 된다.

Spring에서 Cors 이슈를 해결하는 방법

간단한 방법부터 알아보자!

1. @CrossOrigin 어노테이션 사용

@CrossOrigin(originPatterns = "http://localhost:8080")
@RestController
@RequestMapping("/api/v1/users")
public class LoginController {

    @GetMapping("/login")
    public String login() {
        return "로그인 성공!!!!";
    }
}

@CrossOrigin 어노테이션의 Parameter에 CORS 접근을 허용할 출처를 적어주고, 허용할 Controller에 붙여준다.

2. WebMvcConfigurer 설정

@Configuration
public class WebMvcConfiguration implements WebMvcConfigurer {

    @Value("${cors.allowed-origins}")
    private String allowedOrigins;

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins(allowedOrigins)
            .allowedMethods("GET", "POST", "PUT", "DELETE", "HEAD", "OPTIONS"));
    }
}

WebMvcConfiguration 클래스를 만들고 WebMvcConfigurer 를 상속받아 addCorsMappings()를 재정의 해서 사용하면 된다.

allowedOrigins() 매서드를 이용해서 allowedOrigins를 설정해주고, allowedOrigins() 메소드를 통해 허용할 출처를 적어준다. 이 외에 allowedMethods() 메소드를 통해 GET, POST와 같은 HTTP 메소드의 종류도 제한할 수 있다.

끗