[CS] CORS?

CORS란 Cross Origin Resource Sharing의 줄임말로, 서로 다른 도메인 간에 자원을 공유하는 것을 의미하며, 기본적으로 차단되어 있다.

 

Origin이란 무엇일까? 🤔

 

서버의 위치를 의미하는 https://google.com과 과 같은 URL은 마치 하나의 문자열 같아 보여도 사실 여러개의 구성 요소로 이루어져 있다.

이때 Origin이란 protocol과 host 그리고 위의 사진에는 나와있지 않지만 :80, :443과 같은 포트 번호까지 모두 합친 것을 의미하며, Origin이 같으면 CORS에러는 발생하지 않는다.

 

Origin을 비교하는 로직은 서버에 구현된 스펙이 아니라 브라우저에 구현되어 있는 스펙이다.

만약 CORS 정책을 위반하는 리소스 요청을 하더라도 해당 서버가 동일 Origin에서 보낸 요청만 받겠다는 로직을 가지고 있는 경우가 아니라면, 서버는 정상적으로 응답을 하고 이후 브라우저가 응답을 분석하여 CORS 정책에 위반된다고 판단되면 그 응답을 사용하지 않고 버리는 순서로 동작한다.

CORS는 어떻게 동작할까? 👀

기본적으로 웹 클라이언트는 애플리케이션이 다른 출처의 리소스를 요청할 때 http 프로토콜을 사용하여 요청을 보내게 되는데, 이때 브라우저는 요청 헤더에 Origin이라는 필드에 요청을 보내는 출처를 함께 담아 보낸다.

이후 서버가 해당 요청에 대해 응답할 때 응답 헤더의 Access-Control-Allow-Origin이라는 값에 리소스에 접근하는 것이 허용된 출처인지를 내려준다.

이후 응답을 받은 브라우저는 자신이 보냈던 요청의 Origin과 서버가 보내준 Access-Control-Allow-Origin을 비교한 후 이 응답이 유효한지 아닌지를 판단한다.

 

서버에서 응답 헤더에 특정 헤더를 포함하는 방식으로 해결 가능한데, 헤더는 아래와 같다.

 

◎ Access-Control-Allow-Origin : 특정 브라우저가 리소스에 접근 가능하도록 허용

◎ Access-Control-Allow-Method : 특정 http method만 리소스에 접근 가능하도록 허용

◎ Access-Control-Expose-Headers : 자바스크립트에서 헤더에 접근할 수 있도록 허용

◎ credential : 쿠키 등의 인증 정보 전달 가능

 

참고 : https://evan-moon.github.io/2020/05/21/about-cors/