CORS 는 왜 보게 되는 것인가

어떤 사이트에서 API를 오픈해 놓았을 때,

그것을 AJAX를 이용해서 호출해 본인의 홈페이지에서 보여주려고 할 때,

아래와 같은 경고글을 볼 경우가 있습니다.

내용은  CORS 정책에 의해 접근이 막아졌다는 것인데요.

대체 이것이 무엇이고 어떻게 접근해야 하는지 알아보도록 하겠습니다.

1. CORS

CORS는 Cross-Origin Resource Sharing의 약자인데요.

헤더에서 특정 리소스에 대해서는 다른 사이트에서 가져오는 것에 대해서 허락해 달라고 하는 것입니다.

그렇다면, 기존에 다른 사이트에서 리소스를 가져오는 것을 막았었던가?

생각해보면 그렇지 않습니다.

html내의 이미지태그에 들어가는 src라든가 링크주소라든가를 보면,

외부사이트의 것이었는데 말이지요.

네, 맞습니다.이러한 것들은 제한의 대상이 아닙니다.

제한의 대상이 되는 것은 script태그 내에 있는 리소스들입니다.

script태그 사이에 들어오는 리소스들 중 같은 서버에 있지 않는 경우,

브라우저가 보안상의 이유로 이것을 블록합니다.

하지만 예외가 필요한 경우가 있는데요.

그래서 CORS를 헤더에서 명시해 주어서, 

script태그내에서 가져오는 외부사이트의 리소스들에 대해서 블록킹을 하지 않도록 하는 것이지요.

이러한 문제에 대해 대응하는 사이트들은,

헤더에 cors에 대해서 아래와 같이 대응을 해서 response를 보내줍니다.

Access-Control-Allow-Origin: *

이런 대응을 해주지 않는 서버의 api에 접근해서 데이터를 받아오는 경우,

클라이언트의 ajax로 데이터를 받아오는 것은 blocking되어 버리는 것이지요.

정리해보면, script태그내에서 동적으로 외부사이트로부터 받아오는 리소스는 브라우저에 의해 막혀버린다.

그렇지만 예외를 주기 위해서 CORS라는 것이 생겨났다.

따라서 리소스의 소유주는 외부에서 서버를 거치지 않고도 리소스에 접근할 수 있도록 해 주고자 한다면,

헤더에 CORS에 대해서 명시적으로 붙여주어야 하는 것이지요.

2. 해결방법

api는 제공해주면서 CORS를 헤드에 명시해 주지 않는 사이트에는 어떻게 대응해야 할까요?

클라이언트 단에서 해결할 수 있는 방법은 쉽지 않습니다.

proxy를 이용한다든가의 방법이 있기는 하겠지만,

프로덕트레벨에서의 사용으로는 선택하기 어려울 수 있습니다.

아무래도 본인의 서버에서 외부 데이터를 가져와서,

유저에게 보여주는 방법이 현실적인 대책일 수 있겠습니다.