스프링 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라는게 있군.

자바스크립트 튜토리얼 정리 끝

참조 및 번역 http://www.w3schools.com/js/default.asp

자바스크립트는 웹에서 사용하는 스크립트 언어 입니다!

자바스크립트는 수만 개의 웹 페이지에서 디자인을 향상 시키고, 폼을 검증하고, 브라우저를 인식하고, 쿠키를 생성하는데 사용하고 있습니다.

자바스크립트는 인터넷에서 가장 유명한 스크립트 언어입니다.

자바스크립트는 배우기 쉬워요! 즐겨보세요!

JS Basic

JS HOME(Whiteship’s Note)
JS Introduction(Introduction to JavaScript)
JS How To(JavaScript How To …)
JS Where To(JavaScript Where To …)
JS Variables(JavaScript Variables)
JS If…Else(JavaScript If…Else와 Switch Statement)
JS Switch
JS Operators(JavaScript Operators)
JS Popup Boxes(JavaScript Popup Boxes)
JS Functions(JavaScript Functions)
JS For Loop(JavaScript For Loop와 While Loop)
JS While Loop
JS Break Loops
JS For…In
JS Events(JavaScript Events)
JS Try…Catch(JavaScript Try…Catch Statement)
JS Throw(JavaScript Throw Statement)
JS onerror(JavaScript The onerror Event)
JS Special Text(JavaScript Special Characters)
JS Guidelines(JavaScript Guidelines)

JS Objects

JS Objects Intro(JavaScript Objects Introduction)
JS String(avaScript String Object)
JS Date(JavaScript Date Object)
JS Array(JavaScript Array Object)
JS Boolean(JavaScript Boolean Object)
JS Math(JavaScript Math Object)
JS HTML DOM(JavaScript HTML DOM Objects)

JS Advanced

JS Browser(JavaScript Browser Detection)
JS Cookies(JavaScript Cookies)
JS Validation(JavaScript Form Validation)

JS Animation(JavaScript Animation)

JS Image Maps
JS Timing(JavaScript Timing Events)
JS Create Object(JavaScript Create Your Own Objects)
JS Summary

Basic 부분은 요약 하는 식으로 정리했으며
Object와 Advanced 부분은 거의 번역을 했습니다.

전부 살표보신 분들은 재미삼아 퀴즈도 보실 수 있습니다.
물론 다 보지 않고도 퀴즈만 볼 수도 있지요.ㅋ

사용자 삽입 이미지문제 난이도는 매우 쉬운데(20문제 푸는데 3분 10초면..그냥 찍기 수준입니다.ㅋㅋ).. 저는 두 문제를 틀려버렸어요;;

JavaScript Create Your Own Objects

참조 및 번역 : http://www.w3schools.com/js/js_objects.asp

자바스크립트 객체

본 튜토리얼 초기에 자바스크립에 내장되어 있는 객체들 String, Date, Array 기타 등등 같은 것들을 살펴봤습니다. 이런 내장된 객체에 더해서 여러분이 직접 객체를 만들 수 있습니다.

객체는 단지 속성과 메소드로 구성된 특별한 데이터의 종류 입니다.

예제로 생각해보자: person은 객체다. 속성은 객체와 관련있는 값들이다. person의 속성은 name, height, weight, age, skin tone, eye color, 기타 등등이 있다. 모든 person은 이러한 속성들을 가지고 이지만 그 들의 값은 person 마다 다르다. 객체는 메소드도 가지고 있다. 메소드는 객체가 수행할 수 있는 행위다. person의 메소드는 eat(), sleep(), work(), play() 기타 등등이다.

속성

객체의 속성에 접근하는 문법은 다음과 같다.
objName.propName

객체에 값을 추가함으로써 속성을 추가할 수 있다. personObj가 이미 존재 한다고 생각하고 속성 이름 firstname, lastname, age 그리고 eyecolor에 값을 줄 수 있다.

personObj.firstname=”John”
personObj.lastname=”Doe”
personObj.age=30
personObj.eyecolor=”blue”

document.write(personObj.firstname)

위의 코드는 다음과 같이 출력할 것이다.
John

메소드

객체는 메소드도 가지고 있다.

다음과 같은 문법으로 메소드를 호출 할 수 있다.
objName.methodName()

주의: 메소드에서 필요로 하는 파라미터를 괄호 안에 넣어 줄 수 있다.

persionObj 의 sleep() 메소드를 다음과 같이 호출 할 수 있다.

personObj.sleep()

객체 만들기

새로운 객체를 만드는 여러 방법이 있습니다.

1. 객체의 인스턴스를 직접 만들기

다음의 코드는 객체의 인스턴스를 만들고 4개의 속성을 추가합니다.

personObj=new Object()
personObj.firstname=”John”
personObj.lastname=”Doe”
personObj.age=50
personObj.eyecolor=”blue”

personObj에 메소드를 추가하는 것도 간단합니다. 다음의 코드는 eat()이라는 메소드를 personObj에 추가하고 있습니다

personObj.eat=eat

2. 객체의 탬플릿 만들기

탬플릿은 객체의 구조를 정의합니다.

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname
this.lastname=lastname
this.age=age
this.eyecolor=eyecolor
}

탬플릿은 단순한 함수라는 것에 주목하시기 바랍니다. 함수의 내부에서 this.속성명 과 같은 식으로 추가할 수 있습니다. “이런” 작업을 하는 이유는 한 번에 여러 개의 person 객체를 사용할 수 있기 때문입니다.

탬플릿을 만들고 나면, 새로운 객체를 다음과 같이 만들 수 있습니다.

myFather=new person(“John”,”Doe”,50,”blue”)
myMother=new person(“Sally”,”Rally”,48,”green”)

person 객체 몇몇 메소드를 추가할 수 도 있습니다. 이것도 역시 탬플릿 내부에서 합니다.

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname
this.lastname=lastname
this.age=age
this.eyecolor=eyecolor

this.newlastname=newlastname
}

메소드는 객체에 붙이는 단순한 함수 입니다. 다음에는 newlastname() 함수를 작성합니다.

function newlastname(new_lastname)
{
this.lastname=new_lastname
}

newlastname() 함수는 person의 새로운 last name을 person객체 대입합니다.
자바스크립트는 “this”를 사용함으로써 어떤 person을 다루고 있는지 알게 됩니다. 이제 다음과 같이 사용할 수 있습니다.
myMother.newlastname(“Doe”).