최근 아는 형님께서 Cross domain issue로 연락을 주셨다.
옛날에 웹을 처음 배울 때 같은 문제로 고생했던 적이 있는데, 옛 추억도 되새길 겸 Cross domain issue와 관련하여 포스팅 하고자 한다.
Cross domain 문제는 ajax 통신 시 동일 서버(같은 도메인, 같은 포트)가 아닐 경우 보안상의 이유로 접근을 거부하는 것이다.
Cross domain issue는 Javascript의 same origin policy 정책을 위반한 것으로, 인터넷 브라우져의 Sandbox 정책과 관련이 있다.
위 문장에 Cross domain issue의 정의와 해결 방법에 대한 힌트가 모두 들어있다.
위 문장을 다시 정리하면 다음과 같다.
1. 동일 서버로 ajax 통신 하는 것은 정책에 위배되지 않는다. 2. 백엔드단에서 다른 도메인과 통신하는 것은 문제가 없다.
그러므로, 1) ajax로 내 백엔드 서버를 호출하고, 2) 내 백엔드 서버에서 다른 도메인과 통신 한 후 3) 결과 값을 적당히 리턴하면 해결되는 문제이다.
그러나 작업을 하다보면 어디 내 뜻대로 문제가 해결되랴?
모종의 이유로 백엔드 실무자가 협조해주지 않으면 이 해결방법은 쓸 수 없다.
이럴 경우 쓸만한 것이 “jsonp“이다. 그러나 jsonp은 get 요청만 처리할 수 있으므로, 만능 해결책은 아니다.
다음은 좀 특수한 경우인데, cafe.naver.com, blog.naver.com과 같이 서브 도메인만 다르거나, 두 도메인 모두 내 소유일 경우 사용 가능한 방법이다.
전자는 스크립트에 document.domain = “naver.com”를 넣어주므로서 해결할 수 있고, 후자는 CORS를 설정해서 해결할 수 있다.
만약 위 방법 모두 쓸 수 없다면 남은 방법은 하나 뿐이다.
요청하려고 하는 API Server의 실무자에게 CORS를 설정해달라고 공손하게 메일을 보내보자.
그 외에 인터넷 브라우져에 옵션을 걸고 실행하거나, 이상한 플러그인을 설치하는 방법이 있다. 이는 모든 사용자가 수동으로 설정해줘야 하는 문제이므로, 서비스에 적합치 않으므로 설명하지 않겠다.
또 flash, iframe, ActiveX(!!!)를 사용하는 방법도 있지만… 굳이 설명해야 될까 싶다.
3줄요약 1. 내 백엔드를 경유해서 호출하기 (가장 추천하는 방법) 2. 백엔드를 건드릴 수 없다면 구글에 jsonp 검색 3. jsonp도 쓸 수 없다면 CORS를 설정, 공손히 메일을 보내보자.