이번 강의에서는
웹 애플리케이션 안에서 발생하는
CORS 문제를 해결하기 위해
어떠한 해결책들이 있는지에 대해 알아보겠습니다
자 그러니까 Angular와
백엔드 Spring Boot 애플리케이션
사이의 소통이
CORS 문제로 차단됐습니다
최신 브라우저 안에 있는
보안 정책이 활성화되어서 그런 것입니다
왜 두 애플리케이션 사이의 소통이
차단되었을까요?
도메인 이름과 http protocol이 같더라도
포트가 다르기 때문입니다
Angular는 포트 4200에 배포되었고
Spring Boot는 포트8080에
배포되었습니다
그런 이유로 그들이 다른 출처를 갖게 되고
브라우저 속 CORS가 그 둘의
소통을 차단하는 것입니다
가능한 방법들을 찾고 있다면
해결하기 위한 두 가지 방법이 있습니다
Spring Security 프레임워크의 도움이 필요합니다
제일 첫 번째 방법은
REST controller로 주석을 달아둔
controller 클래스에
또는 REST API들을 정의해둔 곳에
@CrossOrigin 라는 주석을 사용하면 됩니다
@CrossOrigin 주석을 달면
어느 출처에서
소통을 받으려는 것인지 말해주는 것입니다
그러니 백엔드 애플리케이션 쪽에서는
소통을 받으려는 또 다른 출처를
설정하면 됩니다
여기서 출처가
http://localhost:4200와 같다고 언급해두는 경우
그러면 소통을 받을 준비가 됐는데
오직 localhost:4200에 배포된
Angular UI 애플리케이션에서만 가능합니다
또는 애스터리스크(*별표)를 사용하여 출처를 설정하면
브라우저에게
백엔드 애플리케이션이 인터넷 상의
어떠한 도메인과도 소통할 준비가 되었다고 알려주는 것입니다
그러한 설정들로
교차출처 소통을
브라우저에서 가능하도록 하는 것입니다
여기서 또 의문이 생길 수 있습니다
브라우저가 어떻게 제가
백엔드 애플리케이션에 설정하는 것을 알아듣나요? 입니다
브라우저들은 대부분 pre-flight 요청을 합니다
그렇다면 pre-flight 요청은 무엇인가 하면
Angular 앱에서 백엔드로
notice API를 불러온다고 가정해봅시다
이 상황에서 브라우저는 이것이
교차출처 소통이라는 것을 확실히 알며
이런 소통이 발생하려 하면
우선 브라우저가
보내지 않습니다
대신 pre-flight 요청을 만듭니다
그리고 백엔드 서버에게 이렇게 말합니다
"교차 출처에서 이러이러한
소통을 시도하고 있어
받을 수 있겠어?"
만약 백엔드 쪽에서
"좋아, 그건 유효한 출처로 보이고
그 출처가 애플리케이션인 것 같아
내게 진짜 요청을 보내줘"라고 한다면
브라우저가 백엔드 서버에게
진짜 notices API 요청을 보내줍니다
백엔드 서버는 어떻게 브라우저와
이렇게 쉽게 소통하는 것일까요?
우리가 사전에 Spring Boot 웹 애플리케이션에
사전에 설정해둔 덕분입니다
이것이 방법 중 하나였지만
이 방법에는 문제가 있습니다
실제 애플리케이션에서는
100개도 넘는 controller들이 있습니다
그래서 모든 controller에 일일히 들어가서
그들의 출저 값을 정의하는 것은 불가능합니다
굉장히 귀찮고 힘든 일일 것입니다
그래서 추후에
출처 값을 바꿔야 할 일이 생기거나
또는 출처 값을 추가하고 싶을 때
여러분은 모든 controller나 REST controller들을
다시 찾아서 매우 귀찮은 작업을 해야 합니다
그러니 대신 세계적으로 설정하는 것이
Spring Security 프레임워크의 도움을 받아 가능합니다
그 방법은 이 슬라이드에 나와있습니다
메소드 안에서
Security FilterChain의 bean 생성할 때
CORS 설정을 정의할 수 있습니다
화면에 강조된 부분입니다
이 CORS 설정을 사용해서
내 백엔드에 허용된 출처들을
브라우저에게 알려주는 것입니다
이 allowedOrigins 메소드에
소통을 하고자 하는
출처들의 리스트를 적을 수 있습니다
그리고 어떤 HTTP 메소드들은 받고 싶은지도
설정해둘 수 있습니다
만약에 오로지 get 요청과 post 요청 같은 것들만 받고 싶다면
이것은 alert 메소드를 통해
설정할 수 있습니다
AllowCredentials는
인증정보들을 넘기고 받는 데에
동의한다고
말하는 것입니다
그리고 마지막으로 allowedHeaders도 있습니다
만약 다른 출처에서 오는 모든 종류의 헤더를
애스터리스크(*)로 정의하면 됩니다
물론 특정 종류의 헤더만 받고 싶다면
그 헤더들만 정의해도 됩니다
여기 제가 정의해둔 MaxAge의 도움으로
3,600초 즉 1시간으로 설정해두었습니다
브라우저에게 이 설정들을
1시간 동안 기억해두었다가
설정해둔 MaxAge에 따라서 1시간이 지나면
캐시로 변환되는 것입니다
주로 제품에서는 이것을
24시간이나 7일 또는 30일로 설정해둡니다
제품의 배포 사이클을 기반해서 입니다
이러한 변화들을 Spring Boot 웹 애플리케이션에
적용하면 브라우저에게
"이러이러한 출처들에서 시도하는
나에게 시도하는 소통들
HTTP 메소드와 헤더들도 허용해줘
그리고 MaxAge를 고려해서
이 CORS 설정들을 기억해줘" 라고 말합니다
이 두 가지 방법을 확실히 이해하셨기 바랍니다
이 과정에서는 Spring Security 프레임워크와 함께
CORS 설정을 포괄적으로 다룰 것입니다
그것이 가장 추천하는 방법이기 때문입니다
다음 강의에서는
CORS 설정들은
우리의 웹 애플리케이션 안에 구현해보고
notice API들을 테스트 해봅시다
그럼 이제 완전히 이해하셨을 거라고 믿습니다
감사합니다 다음 강의 때 뵙겠습니다
수고하셨습니다