CORS 프록시 구현하기

발생일: 2013.07.11

문제:
크로스 브라우징 이슈를 해결하기 위해 CORS 프록시 서버를 구현해야 한다.

서버에서 추가할 작업이 많지 않다고 들었는데, 어떤 것들을 구현해주면 될까?


해결책:

아래 링크를 참고하면 된다.

http://www.html5rocks.com/en/tutorials/cors/

아래는 위 링크의 내용 중 기억할 만한 몇 가지만 메모해둔 것이다.

withCredentials

  CORS는 기본적으로 쿠키를 보내거나 설정하지 않는다.

  쿠키를 보내거나 설정하고 싶다면, `withCredentials` 속성을 설정한다.

  xhr 객체에도 설정해야 하고, 서버에서도 `Access-Control-Allow-Credentions` 헤더에 true를 할당해서 보내야 한다.

    xhr.withCredentials = true;

    Access-Control-Allow-Credentials: true

CORST 요청에는 간단한 것과 약간 복잡한 것이 있다.

간단한 요청은,

     - HEAD, GET, POST 메서드를 사용하고,

     - Accept, Accept-Language, Content-Language, Lsat-Event-ID, Content-Type 헤더만 사용하며,

     - 응답으로 application/x-www-form-urlenceded, multipart/form-data, text/plain 만 사용할 때

복잡한 요청은

     - PUT, DELETE 메서드를 사용하거나,

     - 기본 헤더 이외의 헤더를 보내려고 하거나,

     - 응답으로 application/json 같은 타입을 사용하려고 할 때

복잡한 요청의 경우, 먼저 `OPTION` 메서드로 요청을 보내고,

이 때 받은 헤더 정보로 다시 요청을 보내는 방식이다.

요청하는 헤더 설명

Origin

     요청 호스트

Access-Control-Request-Method

     실제 HTTP 요청 메서드

Access-Control-Request-Headers

     요청에 포한되는 간단한 헤더가 아닌 경우

서버에서 응답하는 헤더 설명

Access-Control-Allow-Origin

     요청을 허용할 오리진. 보낸 origin 헤더 값이나 * 를 응답하면 된다.

Access-Control-Allow-Credentials

     (옵션) 쿠키를 설정하려는 경우 true를 할당하면 된다.

Access-Control-Expose-Headers

     (옵션) XMLHttpRequest2 객체는 getResponseHeader() 메서드로 아래 헤더에만 접근할 수 있다.

     Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma

     다른 응답 헤더에도 접근하게 허용하고 싶다면, 여기에 헤더 이름을 컴마로 구분해 추가하면 된다.