스프링 HandlerInterceptor로 구현해본 CORS 구현체

이 인터셉터는 어제 정리해둔 CORS를 스프링의 HandlerInterceptor를 이용해서 처리하는 코드를 작성해본 것입니다. 하지만… 테스트는 하지 않았으니.. 반드시 테스트 해보시고 사용하시기 바랍니다. 흠….

simple 방식과 preflight 방식 모두 지원하도록 만들었습니다.

매우 단순하게 구현해본 구현체라서 확장성을 고려하려면 설정 방식을 여기에 코딩한 것처럼 단일값으로 적어주는게 아니라.. 특정 URL 패턴마다 지원할 Methods나 Headers를 따로 정의하고.. 요청에 들어온 헤더 정보와 비교해서.. 지원할 Methods와 Headers의 값으로 응답 헤더를 지정해 주는 것이 더 좋을 것 같다.

CORS, Cross-Origin Resource Sharing이 뭐다냐…

흠냐…

1. http://www.bennadel.com/blog/2327-Cross-Origin-Resource-Sharing-CORS-AJAX-Requests-Between-jQuery-And-Node-js.htm

여기가면 두 개의 링크가 있는데 그 두개의 링크는..

2. http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/

3. http://remysharp.com/2011/04/21/getting-cors-working/

이 중에서 윗글(2번 링크) 마지막에 CORS  예제 링크가 있습니다.

4. http://arunranga.com/examples/access-control/

이곳은 예제 모음이고.. 여기에 세부적인 예외 페이지 링크가 걸려있습니다. 크롬이나 파폭 인스팩터로 구경할 수 있습니다.

CORS는 최신 브라우저만 지원됩니다.

* 지원 브라우저 (두번째 링크에 잘 설명되어있습니다.)

  • 파폭 3.5+
  • IE8+
  • 사파리 4+
  • 크롬

* CORS 지원 브라우저중에서 IE와 비IE 브라우저의 차이점 (두번째 링크에 잘 설명되어있습니다.)

  • 다른 브라우저는 XmlHttpRequest를 그대로 사용하지만 IE는 XDomainRequest라는 걸 사용해야 합니다.
  • CORS의 추가적인 헤더 정보를 활용해서 Preflighted 요청이라는 걸 보낼 수 있지만 IE8은 그럴 수 없습니다.

=> 결국 IE는 CORS를 적용할 수 있는 버전이 제한적이며 적용할 수 있는 버전도 다른 브라우저오는 다른 형태로 처리해주어야 합니다.

* 쉬운 방법의 CORS와 preflighted 요청을 이용한 CROS

– 쉬운 방법의 CORS는 다른 도메인에 있는 리소스를 그냥 XmlHttpRequest로 요청하면 됩니다. 그냥… 그렇게 하면 CORS를 지원한느 브라우저가 알아서 부가적으로 ORIGIN이라는 헤더를 붙여서 상대방 도메인의 서버로 요청을 보내고… 그럼 그 서버가 만약에 크로스 도메인을 지원할꺼면.. 응답의 헤더에 Access-Control-Allow-Origin이라는 곳에 요청에 들어온 도메인을 그대로 적어 보내주거나 퍼블릭한 데이터면 *를 적어 보내주면 됩니다.

단순하죠…

그냥 요청하면 -> 브러우저가 ORIGIN 헤더 붙여서 전송… —-> 그럼 처리해줄 서버가 응답에 Access-Control-Allow-Origin 헤더 붙여서 응답.

– preflighted 요청을 사용하는 경우는 다릅니다. 사전답사를 한다고 해야할까. 다른 도메인으로 요청을 보내려고 하면.. 부가적인 헤더 정보를 가지고 먼저 OPTIONS 메서드 요청을 보냅니다. 그럼 서버에서 특정 헤더 정보를 가지고 응답을 해줘야하죠. 그 응답을 가지고 다른 도메인에 요청을 보내도 되는지 확인이 되면… 그때 본래 요청을 보내고 응답을 받게 됩니다.

그냥 요청하면 -> preflighted 요청이 날아감 —-> 서버가 OPTIONS 요청 처리 —-> 본래 요청 날림 —-> 서버가 본래 요청 처리해서 응답.

이때 주고받는 요청/응답 헤더 정보는 세번째 글에 잘 설명이 되어있습니다.

1장~6장 정리

자바스크립트는 Unicode를 사용함.

대소문자를 가림. HTML은 대소문자를 안 가리는데..

공백 상관없음.

세미콜론 안 붙이면 알아서 붙인걸로 인식한다. 붙여주는게 좋음.

주석은 자바랑 같음.

변수명 규칙도 자바랑 같음.

세 가지 primitive 타입이 있음. number, string, boolean. 이 들의 Wrapper 클래스들 있다. AutoBoxing/unBoxing 해준다.

자바스크립트는 function도 Object. 따라서 메소드의 인자로 넘길 수도 있다.

Function 만들 때 Function Literal 형태로 만들 수 있다.
var square = function(x) { return x*x; }

Object 만들 때도 Literal 형태로 만들 수 있다.
var point = { x:2.3, y:-1.2 };

초기화 안 한 변수는 undefined.

변수를 선언한 위치에 따라 Scope이 결정되는데, local에서 var를 사용하지 않고 변수 선언하면 전역변수가 된다. 변수 선언은 항상 함수 맨 위에 하는 것이 좋고, var는 맨날 붙이는게 좋다.

==은 자바의 equals()랑 비슷하고, ===는 자바의 ==랑 비슷하다.

for/in 루프가 있군.

with라는게 있군.

4. Ajax Application Examples

이번에는 AJAX 관련 서적에 있는 샘플 코드들을 실행시켜보는 것으로 이루어져있습니다. 따라서 PPT는 없고 실습과 숙제로 구성되어 있습니다.

실습
1. Foundation of AJAX 에 있는 샘플 코드 다운로드 & 실행하기

넷빈즈의 프로젝트 기반으로 만들어진 샘플 코드라서 이클립스에서 실행하려면 약간 불편합니다.
1. Eclipse에서 Dynamic Web Project 생성(이때 웹 기본 폴더를 WebContents 에서 web 으로 수정해 줍니다.)
사용자 삽입 이미지
사용자 삽입 이미지2. 샘플 코드가 있는 곳에 가서 복사
사용자 삽입 이미지3. 프로젝트에 붙여넣기
사용자 삽입 이미지4. 그러면 패키지 경로가 이상해서 에러가 납니다.(패키지 경로 맨 앞에 붙는 java를 띄어냅니다.)
사용자 삽입 이미지5. 마지막으로 Run on Server를 실행합니다.
사용자 삽입 이미지
숙제
“Pro AJAX and Java Frameworks” 책의 Chapter5 예제 코드를 실행하는 것이 숙제로 군요…
1. 샘플 코드 다운 & 압축 풀기
– 전송 속도가 100kb 정도 입니다. 다운로드 하는데 10분 정도 소요 됩니다.
2. 이 뒤부터는 위에서 설명한 방법대로 Eclipse 에서 NetBeans 기반의 프로젝트를 실행할 수 있습니다.
사용자 삽입 이미지

3. Ajax Frameworks and Toolkits

아흑.. 이번에도 선수 학습이 있군요.
Proprietary AJAX toolkits: The other side of the coin
Surveying open-source AJAX toolkits

두 개의 아티클을 읽은 다음에 PPT를 봐야겠습니다.
PDF:
1 slide per page

실습
Online
lab document

숙제
Homework

사용자 삽입 이미지와.. 엄청나게 다양한 AJAX 툴킷들이 있었구요. 이중에서 들어본건 Dojo, DWR, GWT.. 나머지는 첨들어 봅니다.
위에 나열된 각각의 기술 들 중에 특정 구현체 하나를 선택해서 실습해 보도록 되어 있습니다.
그리고 맨 마지막에는 어떤 경우에 무엇을 사용할지 설명하고 있습니다.