최근에 간단한 페이지를 만들면서 Open API를 사용하다 CORS 이슈를 맞닥뜨려 당황스러웠던 경험이 있었다. 이번 기회에 CORS 그리고 SOP에 대해서 더 자세하게 알아보고 내용을 정리해보기로 했다.
CORS ERROR
예로 클라이언트에서 서버 API로 요청을 보낸다고 가정할경우 CORS오류가 발생하는 경우는 다음과 같다.
// CORS오류 발생😥
클라이언트 (브라우저) 서버 API
https://frontend-cors-test ➡ https://backend-cors-test
클라이언트 (브라우저) 서버 API
https://localhost:8000 ➡ https://localhost:3000
위와같이 API요청시 클라이언트의 URL(Orign)과 서버의 API(Orign)주소가 다르면 브라우저에서는 서로 다른 출처로 구분을 하고 CORS오류를 발생시킨다.
URL Origin
Origin이란 URL에서 Protocol Host Port 를 합친것을 의미한다.
브라우저는 Orgin을 통해 API요청시 클라이언트와 서버가 서로 동일한 출처인지를 판단하게 된다.
그럼 CORS와 SOP는 무엇일까?
CORS(Cross-Origin Resource Sharing)
CORS는 Cross-Origin Resource Sharing의 약자로 해석하면 서로 다른 출처의 자원을 공유한다는 의미이다.
출처가 다르더라도 요청을 보낼 수 있게 해줌😀
SOP(Same-Origin Policy)
SOP는 Same-Origin Policy의 약자로 해석하면 같은 출처의 정책을 뜻한다.
출처가 같을 경우에만 요청을 보낼 수 있음😥
정리하자면 기존 SOP정책에 의해 할 수 없었던 서로다른 출처간의 요청을 CORS설정을 통해 정상적으로 요청할 수가 있게 된 것
CORS 시나리오
클라이언트에서 API로 요청을 보낼시 브라우저는 Request의 Origin: Header에 보내는곳의 출처를 담는다.
서버에서는 응답값을 보낼 시 Response의 Access-Control-Allow-Origin: Header에 허용할 출처를 지정할 수가 있다.
따라서 브라우저는 요청값의 Origin과 응답값의 Access-Control-Allow-Origin을 비교하여 출처가 같은지를 판단하고 같다면 요청을 수락하고 다르다면 CORS에러를 반환하게 된다.
위 내용을 토대로 CORS시나리오는 크게 3가지로 나눌 수 있다.
