node.js 에서 CORS 설정하기

안녕하세요 남산돈가스입니다.

오늘은 크로스도메인 문제에 관련 된 CORS 에 대해서 다루어볼까합니다.

먼저 CORS에 대해서 알아보겠습니다.
CORS란  Cross Origin Resource Sharing의 약자로, 현재 Application의 도메인(웹페이지)에서 다른 웹페이지 도메인으로 리소스가 요청되는 경우를 얘기합니다. 예를 들면, 웹페이지인 http://web.com 에서 API서버 URL인 http://api.com이란 도메인으로 API를 요청하면 http 형태로 요청이 되므로 브라우저 자체에서 보안 상 이유로 CORS를 제한하게 되는 현상을 말합니다.

저희 팀에서 SPA(Single Page Application) 기반 앱을 RESTful API연동 방식으로 개발을 하다보니 API 서버와 웹페이지서버가 각각 따로 운영이 되므로 CORS 문제에 항상 부딪히는 경우가 다반사였습니다.

이 문제를 해결하기 위해서는 API 요청을 받는 쪽. 즉, API서버의 응답 헤더를 변경해주는 것으로 해결 해 줄 수 있습니다. 서버 헤더 중 Access-Control-Allow-Origin이라는 헤더 프로퍼티가 있는데, 이 헤더는 CORS를 허용해 주는 도메인을 설정해 주는 역할을 합니다.

이렇게 node.js Express기반의 API 서버에서 Access-Control-Allow-Origin 헤더를 설정해줄 수 있는 cors npm 모듈이 있습니다. 지금부터 간단히 CORS 설정을 진행해보겠습니다.

적용 방법은 굉장히 간단합니다. 우선 cors npm 모듈을 install 해줍니다.

npm install --save cors

cors 모듈이 설치가 되었다면, app.js로 이동합니다.

cors 모듈을 불러옵니다.

var cors = require('cors');

Array 변수를 하나 선언하고 해당 배열에 CORS를 허용할 도메인을 담아줍니다.

예를들어. http://a.com 과 http://b.co.kr 를 허용하려고 한다면,

var whitelist = ['http://a.com', 'http://b.co.kr']

var corsOptions = {

origin: function(origin, callback){

var isWhitelisted = whitelist.indexOf(origin) !== -1;

  callback(null, isWhitelisted); 

// callback expects two parameters: error and options 

},

credentials:true

}

corsOptions부분은 whitelist들을 비동기로 처리하는 option을 설정하는 부분입니다.

cors 허용할 도메인을 설정하고 option 설정까지 마쳤습니다. 마지막으로 option 값으로 cors를 설정해주면 적용이 완료됩니다.

app.use( cors(corsOptions) );

app.js에서 app.use 로 cors를 지정해주면, 모든 API 요청에 대해서 설정한 도메인을 허용하게 됩니다.

위에서 whitelist를 ['*'] 로 설정하게 되면 모든 도메인이 API서버 요청들어오는 것을 허용한다는 것을 의미하므로 보안사항에 맞게 적절히 사용해주시면 될 것 같습니다. 감사합니다.