Ajax와 CORS( 다중 서버 접속 )

1. Ajax( Asynchronous JavaScript and XML )

Ajax는 JS 언어와 XML 형식으로 서버와 비동기적으로 통신하는 기법을 말합니다.

( 과거에는 XML을 사용했지만, 요즘은 JSON( Javascript Object Notataion )을 주로 사용합니다. )

조금 더 와닿게 정의하자면, Ajax를 사용하면 전체 페이지를 reload하지 않고도 갱신이 필요한 페이지 일부만 load 할 수 있습니다.

reload가 된다는 것은 redirect가 된다는 것이고, redirect는 서버에 자원을 반환한 후에 새로운 경로로 요청하는 것을 의미합니다.

반면 Ajax는 서버에 자원을 반환할 필요 없이 변경된 부분만 클라이언트에게 응답합니다.

위키피디아에서는 Ajax를 아래와 같이 장단점을 소개하고 있습니다. ( 링크 )

• 장점
• 페이지 이동없이 고속으로 화면을 전환할 수 있다.
• 서버 처리를 기다리지 않고, 비동기 요청이 가능하다.
• 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다.
• 단점
• Ajax를 쓸 수 없는 브라우저에 대한 문제가 있다. ( 크로싱 브라우저 문제 )
• HTTP 클라이언트의 기능이 한정되어 있다.
• 페이지 이동없는 통신으로 인한 보안상의 문제
• 지원하는 Charset이 한정되어 있다.
• 스크립트로 작성되므로 디버깅이 용이하지 않다.
• 요청을 남발하면 역으로 서버 부하가 늘 수 있음.
• 동일-출처 정책으로 인해 다른 도메인과는 통신이 불가능하다.

장점보다 단점이 더 많은 것 같네요. ㅎㅎ

뭐 이러한 장담점을 떠나서 저의 경험상 Ajax를 사용하면 "UX가 좋아지고, 구현이 조금 복잡해진다" 정도의 느낌을 받고 있습니다.

물론 필요에따라서 반드시 사용하는 경우도 있지만요.

어쨋든 실제로 Ajax는 많은 곳에서 볼 수 있습니다.

대표적으로 Gmail을 보시면, 사이드바의 항목을 클릭했을 때 URL이 변하지 않습니다.

또 페이스북에서 게시글의 댓글을 등록할 때도 페이지가 reload 되지 않습니다.

현재 보고 있는 게시글의 댓글 창이 유지된 상태에서 댓글을 등록하면, 그 댓글이 보고 있는 댓글 창에 그대로 추가 됩니다.

이처럼 Ajax는 여러 곳에서 사용하고 있으며, UX를 높여주는 좋은 기술입니다.

이 글에서는 Ajax를 구현하는 방법을 다루지 않으며, jQuery를 이용해서 Ajax를 구현하는 방법은 여기를 참고해주세요.

2. CORS ( Cross - Origin Resource Sharing) - 다중 서버 접속

CORS는 위에서 언급한 Ajax의 단점 중 7번 째 항목인 동일-출처 정책을 의미합니다.

CORS는 HTML5 기술 보안에서 언급되는 용어입니다.

• Origin이란 스키마, 호스트명, 포트 번호의 조합으로 표현되는 식별자를 의미하며,
• CORS란 동일 Origin의 경우에만 접근을 허용하는 정책을 말합니다.

브라우저는 Ajax를 사용해 데이터를 가져올 수 있도록 XHR( XML Http Request )를 지원했습니다.

그런데 보안상의 문제로 웹 페이지를 제공하는 서버 이외의 다른 서버는 접근할 수 없다는 제약을 추가되었습니다.

이것을 동일-출처 정책이라고 합니다.

그런데 현실에서는 하나의 클라이언트가 여러 서버에 접속하여 API를 통해 데이터를 활용하는 경우가 많아지고 있습니다.

이 때문에 "데이터 제공 요청을 받은 웹 서버에서 클라이언트가 다른 웹 서버로도 접속할 수 있다는 것을 허용하면, 클라이언트는 다른 웹 서버로도 접속할 수 있다"는 CORS 표준을 만들었습니다.

쉽게 말해서 CORS를 사용하면,

클라이언트에서 Ajax를 사용해 서버로부터 데이터를 가져올 때 데이터를 가져오는 그 서버 이외에 다른 서버도 접속할 수 있다는 것입니다.

그런데 항상 CORS를 사용해야 한다는 것은 아닙니다. 

다른 웹 서버로부터 데이터를 가져올 것이 있다면 필요하겠지만, 그렇지 않은 상황에서는 필요하지 않겠죠.

각 언어마다 CORS를 지원하는 라이브러리가 있으며, Node.js에서는 cors 모듈을 통해 미들웨어로 등록하면 CORS를 허용합니다.