Mine Sweeper 프로젝트 中 CORS 테스트 코드 작성

👣 개요

프로젝트 진행 중 React와 Spring을 동시에 사용해서 프로젝트를 구성했기 때문에
CORS 문제는 언제나 따라다녔습니다. 

CORS 문제 이외의 구현은 테스트 코드를 작성해서 문제를 조기에 예방했기 때문에
버그 발생 확률이 현저히 낮았습니다. 
하지만 CORS 문제의 경우, 브라우저를 이용해야 버그가 발생하기에
조기에 발견하기 너무 어려웠습니다.

혹시나 하는 마음에 CORS 테스트 코드를 찾고자 구글링을 해보아도
간단한 JS 코드를 이용해 웹 페이지에서 직접 서버로 API 호출하는 경우
이외에는 뾰족한 수가 보이지 않았습니다.

하지만 CORS에 대해 조금 더 공부해본 결과 브라우저에서
CORS 정책대로 유효성을 확인해볼 때, Preflight 요청을 보낸다는 것에 착안해서
테스트 코드를 작성해보고자 했고 실제로 프로젝트에 적용해서 조기에 CORS 문제를 해결해본
경험이 있었습니다. 그에 대한 과정을 해당 게시물에 적어보려 합니다.

 

👣 CORS 中 Preflight 요청

CORS에 관한 게시물을 이미 작성한 바가 있으므로 개념적인 논의는 생략하겠습니다.

CORS, SOP

 

다만, 해당 테스트를 만들기 위해 꼭 필요한 요점만 따로 언급하도록 하겠습니다.
상황 가정은 다음과 같습니다.

사용자가 직접 마주하게 될 웹페이지의 웹 서버 Origin : http://some-host:80 - 간단히 Origin A
해당 웹 페이지가 요청을 보낼 서버 Origin : http://other-host:8080  - 간단히 Origin B

👌🏻 [ 허용된 Origin인 경우 ]
1. 출처가 다른 서버로의 요청 전, Preflight 요청을 해당 Origin B로 전송
2. Origin B 서버는 Preflight 응답에 해당 Origin A는 허용한다는 의미로
200 응답과 Access-Control-Allow-Origin 헤더에 Origin A를 포함시킴.

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://some-host:80

3. 웹 브라우저는 200 응답을 보고 안전한 Origin이라 판단 후, 원래 요청을 보냄.

⛔ [ 허용되지 않은 Origin인 경우 ]
1. 출처가 다른 서버로의 요청 전, Preflight 요청을 해당 Origin C로 전송
2. Origin C 서버는 Preflight 응답에 해당 Origin A는 허용하지 않는다는 의미로 403 응답을 전달함.

HTTP/1.1 403 FORBIDDEN
Invalid CORS request

3. 웹 브라우저는 403 응답을 보고 안전하지 않은 Origin이라 판단 후, 오류를 일으킴.

 

👣 CORS 확인을 위한 Test Code 구성

위와 같은 상황이라면 테스트 코드 구성은 매우 간단해졌습니다.
그저 서버를 향해 Preflight 요청을 보내고 요청 헤더에는 확인하고 싶은 Origin을 넣어주면
응답으로 200 요청이 떨어지는지 아닌지만 확인하면 됩니다.