TIL 23.02.06

오늘은 CORS,SOP에 대해서 공부한 뒤

node.js를 통해서 간단하게 서버를 구현해 보는 실습을 하였다.

 

api와 연결하거나, 서버와의 연결을 할 때 종종 아래 이미지를 본 적이 있을 것이다.

이 에러는 CORS policy만을 보고 CORS라는 것 때문에 발생하는 것 같지만,

SOP(Same-Origin Policy) 때문에 발생한다.

 

그렇다면 SOP와 CORS는 무엇일까?

 

SOP(Same-Origin Policy)는 동일 출처 정책을 뜻한다.

여기서 출처란 (프로토콜+호스트+포트)이며, 같은 출처의 리소스끼리만 공유가 가능하다는 뜻이다.

 

하지만, 다른 출처의 리소스를 사용할 때는

CORS(Cross-Origin Resource Sharing)를 사용한다.

CORS는 추가적인 HTTP 헤더를 적용하여, 다른 출처 자원에 접근 권한을 부여하는 체제이다.

 

오늘은 CORS의 동작 방식 중 하나인, 프리플라이트 방식으로 node.js에서 

간단한 서버 실습을 진행하였다.

 

실습을 진행하며 Node.js HTTP 처리 과정을 파악하기 위해, 아래 링크를 참고하였다.

https://nodejs.org/ko/docs/guides/anatomy-of-an-http-transaction/

HTTP 트랜잭션 해부 | Node.js

 

구현해야할 과제는 간단하였다.

문자를 입력하고 대문자 or 소문자 버튼을 눌러 서버로 요청한 뒤

받은 문자를 버튼에 맞게 변환해주고 다시 클라이언트에 응답해주는 예제이다.

 

단순한 요구사항 이었지만, 생각보다 구현에 있어서 애를 먹었다.

1. OPTIONS 메소드는 어디서 보내지는지 의문

2. 프리플라이트를 어떻게 처리해야될지 의문 

 

이 두가지 질문에 막혀서 진행하는데 어려움을 겪었다.

 

1번 의문은 개념을 다시 보면서 이해를 했다.

 

Simple Request 조건

조건 1. 메서드 : GET, POST, HEAD
조건 2. 헤더 : Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width
조건 3. Content-type 값 : application/x-www-form-urlencoded, multipart/form-data, text/plain

 

즉 조건을 만족하지 않을 때, Preflight 요청을 날려버린다.

 

현재 보내는 조건의 Content-type값은 application/json이기 때문에,

브라우저에서 기본적으로 프리플라이트 요청을  하는 것이었다.

 

2번 의문은 개발자도구의 네트워크 창을 보고 이해할 수 있었다.

Preflight 요청을 한 뒤, fetch의 요청을 바로진행하는 것이었다. 

하지만, 모든 요청이 Preflight와 함께 수행되는 것은 아니다. 

 

요청 헤더의 "Access-Control-Max-Age": 10 은 10초동안 요청의 결과를 캐시한다라는 의미이므로

Preflight 요청은 10초동안 유효하며,  10초 이후에는 또 다시 Preflight 요청을 해주어야한다.

 

따라서 OPTIONS ,POST 요청이 들어오는 것을 처리해주며 해결하였다.

 

구현 예시

 

-끝-