HTTP 접근 제어 (CORS) :: 마이구미

이 글은 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})