[Spring] CORS - 프런트엔드와 백엔드 연결

CORS

• Cross-Origin Resource Sharing의 약자
• 리소스를 제공한 도메인이 현재 요청하려는 도메인과 다르더라도 요청을 허락해 주는 웹 보안 방침
• 위키피디아: 웹 페이지 상의 제한된 리소스를 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조
• mozilla: 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제

 

  쉽게 말하자면 도메인(웹 서비스에서 컴퓨터를 식별하는 호스트명)이 다르더라도 리소스에 접근할 수 있게 하는 것이다.

 

  프론트엔드의 주소가 localhost:3000이고 백엔드 주소가 localhost:8080일 때 프론트엔드에서 요청을 보낸다고 해서 바로 접근이 불가능하다. 왜냐하면 아래의 이미지에서 볼 수 있듯이 CORS 정책을 위반했기 때문이다. 따라서 백엔드에서 추가적인 작업이 필요하다.

Origin은 localhost:3000이다. Origin은 URL과 포트번호까지 함께 합친 것이다. 

 

  프론트엔드에서 요청을 보낼 때 브라우저는 2개의 요청을 보낸다. 첫 번째 요청은 OPTIONS 메서드를 사용하여 어떤 HTTP 메서드를 사용할 수 있는지 확인하는 것이다. 그 다음 OPTIONS 요청이 반환되고 CORS 여부 및 원래 보내려고 했던 요청 사용 가능 여부를 확인한다. 그리고 두번째 요청으로는 원래 보내려고 했던 요청을 보낸다.

 

  요청이 성공하면 2XX 메세지를 받지만 위의 OPTIONS의 결과를 보면 403 에러를 받았다. 

403 Forbidden은 서버가 허용하지 않는 웹 페이지나 미디어를 사용자가 요청할 때 웹 서버가 반환하는 HTTP 상태 코드이다.

 

  위의 문제를 해결하기 위해서 백엔드에서 해당 도메인이 요청을 보냈을 때 접근이 가능하도록 처리를 한다. 스프링에서 접근 가능하도록 설정 추가할 클래스를 만들고 WebMvcConfigurer을 인터페이스 상속한다. 

  인텔리제이에서 control + O를 누르면 상속받을 수 있는 메서드들이 있다. 저기서 addCorsMappings 메서드를 오버라이딩하도록 한다.

 

  모든 경로에 대해서 Origin이 localhost:3000이면 허락하는 코드이다. 자세한 설명은 주석으로 대체한다.

 

  그리고 다시 접속을 하면 2XX으로 프론트엔드에서 백엔드로 요청이 성공한 것을 볼 수 있다.