<aside> <img src="/icons/list_gray.svg" alt="/icons/list_gray.svg" width="40px" /> 목차
</aside>
예전 워크북에서 이미 저희는 Express.js 서버의 CORS 설정을 마쳐둔 상태였습니다. 바로 이렇게요!
app.use(cors()); // cors 방식 허용
app.use(express.static("public")); // 정적 파일 접근
app.use(express.json()); // request의 본문을 json으로 해석할 수 있도록 함 (JSON 형태의 요청 body를 파싱하기 위함)
app.use(express.urlencoded({ extended: false })); // 단순 객체 문자열 형태로 본문 데이터 해석
하지만 이렇게 설정만 마치고 바로 넘어갔다보니, CORS에 대해 아직 저희는 잘 모르는 상태일 거예요.
CORS는 Cross-Origin Resource Sharing의 줄임말로, 서로 다른 주소에 있는 서버와 웹 사이트들이 통신할 때 이를 허용하는 개념이에요.
개발을 하다 보면 한 번쯤 보았을만한 CORS 오류
예를 들어, https://neordinary.co.kr에서 https://api.umc.com 서버를 호출한다면, 서로 다른 주소에 있기 때문에 브라우저는 요청을 기본적으로 차단해요. 그리고 이 요청을 허용하기 위해서는 서버의 CORS 설정이 필요해요.
보통은 프론트엔드와 서버는 서로 다른 도메인에 배포되어 통신하다보니 특히 더 필요한 개념이기도 해요.
CORS는 서버의 응답 헤더를 통해 동작합니다.
기본적으로 프론트엔드는 서버에 실제 요청(GET, PUT, POST, DELETE, …)을 전송하기 전, 동일한 Path에 OPTIONS 메소드로 요청합니다. 이 요청은 아무런 동작을 하지 않고, CORS 등의 정보를 미리 알기 위한 Preflight 요청입니다.
이 Preflight 요청의 응답에는 다음과 같은 헤더들이 포함됩니다. 이 헤더들을 통해 프론트엔드에서 서버에 요청할 때 어떤 주소가 허용되는지, 어떤 메소드가 허용되는지, 어떤 헤더가 허용되는지와 같은 정보들을 알 수 있고, 브라우저가 이를 기반으로 판단하게 됩니다.
더 자세한 정보를 알고 싶다면 아래 문서를 참고해주세요!