• HTTP 접근 제어 (CORS) :: 마이구미
    크로스 브라우징 2017. 9. 15. 21:43
    반응형

    이 글은 Cross-Origin Resource Sharing(CORS) 에 대해 다뤄본다.

    즉, 크로스 도메인 관련 내용이라고 보면 된다.

    번역된 공식 문서를 참고해도 좋다.

    https://developer.mozilla.org/ko/docs/Web/HTTP/Access_control_CORS


    CORS는 무엇인가?


    다른 도메인으로부터 요청될 경우, 일반적인 HTTP 요청이 아닌 cross-origin HTTP 요청으로 처리하게 된다.

    브라우저는 보안상의 이유로 cross-origin HTTP 요청을 제한하게 된다.

    이유는 단순히 same-origin 정책이다.

    이러한 불편함으로 인해, 시간이 지나 W3C에서 대안으로 CORS 메커니즘을 내놓은 것이다.


    CORS는 어떻게 동작되는 건가?


    CORS는 라이브러리 혹은 구현 기술이 아닌 방침이라고 보면된다.

    CORS는 브라우저의 정보를 읽을 수 있도록 서버에게 알려주도록 허용하는 HTTP 헤더를 추가함으로써 동작한다.

    풀어서 설명하면 다음과 같다.


    브라우저는 먼저 강제적으로 사전 전달(preflight) 요청을 하게 된다.

    이 요청은 CORS 관련 헤더를 찾으라는 요청이 된다.

    그리고 요청이 가능하다고 판단되면, 실제 요청이 보내지는 것이다.


    이러한 과정은 어떠한 경우에 발생하는가?


    • GET, POST, PUT 이외의 메소드를 사용할 경우
    • 커스텀 헤더를 사용할 경우
    • POST 요청이 Content-Type 헤더에 다음과 같은 설정 이외의 것을 사용할 경우
      (application/x-www-form-urlencoded, multipart/form-data, text/plain)


    대표적인 예로 크로스 도메인을 통해 아무런 설정없이 POST 요청하는 경우에 어떻게 될까?

    다음과 같은 에러가 발생한다.


    Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.


    요청 헤더 필드의 Content-Type이 사전 전달 응답에서 Access-Control-Allow-Headers로 인해 허락되지 않았다는 에러가 발생한다.

    Content-Type에 위에서 명시한 헤더 설정을 해주지 않았기 때문에 발생하는 에러가 된다.


    마지막으로 Content-Type 관련 주의할 점을 보자.

    대부분 Content-Type은 "application/json" 에 익숙하기 때문에, 다른 설정 시 주의해야한다.

    하나의 예로 application/x-www-form-urlencoded 경우 key-value 형태로 전송되기 때문에, 원하는 객체 형태가 key값에 들어가 있을 것이다.

    그 결과 Node.js의 경우 다음과 같은 현상을 볼 수 있다.


    // client

    $http.post(url, {id: 'test'})


    // server

    req.body.id // undefined


    원하는 정보를 전송했지만, key로 저장되어 있기 때문에 원하는 객체 형태로 받아오지 않는다.

    그렇기에, querystring 같은 모듈을 사용할 수 있다.


    const querystring = require('querystring')

    $http.post(url, querystring.stringify({id: 'test})


    반응형

    댓글 0

Designed by Tistory.