[Node.js] CORS (Cross Origin Resource Sharing)

NPM(Node Package Manager) 에 대해서는 이제 어떤건지 대략적으로 알수 있을 것 같습니다.

이제부터는 NPM 에서 사용하였던 모듈들에 대해서 리스트를 작성 하도록 할려고 합니다.

이번에는 2번째 모듈인  cors (Cross Origin Resource Sharing)  모듈에 대해서 간단하게 보려고 합니다.

왜 두번째로 cors를 하였냐면 가장 맨 처음에 부딪치는 이슈이기 때문입니다. 

122.118.155.163:3000 으로 node서버를 진행시

122.118.155.163 에서 node 실행 인데 3000 port로 Listen 중 이며

122.118.155.163:8888 에서 웹서버가 디플로이 (Deploy) 된 상태 에서 클라이언트가 

122.118.155.163 으로 ajax 요청을 보내게되면 크로스 도메인 이슈가 나타나게 된다.

웹서버(웹프로젝트)는 8888에 떠있지만 실제로 요청을 받는 API 서버는 3000 포트에서 받고 있기 때문이다. 

해당 크로스 도메인에 대해서는 따로 찾아 보시길 바라고 해당 의 경우에는 

3000으로 Listen 중인 이 서버가 같은 IP를 사용하고 있지라도 CORS 문제로 인해서 restapi 를 사용할수가 없게 된다. - 보안 상의 이유로 안된다고 하는데 해당 사항에 대해서는 찾아서 이 글에 수정 하도록 하겠습니다.

XMLHttpRequest cannot load http://xx.xx.xx.xx/xxx. Request header field Content-Type is not allowed by Access-Control-Allow-Headers. 

출처: http://blog.opid.kr/430 [opid's document]

해당 에러 메시지 가 나타났을 경우에 CORS 이슈가 나타났다고 할수 있습니다.

** IE에서 간혹 cors를 설정 하였는데도 불구하고 SEC7118 XMLHttpRequest CORS 라는 에러를 내 뿜는

경우가 있는데 해당은 IE 11 버그입니다. (Windows 10 으로 가서 실행시는 나타나지 않는)

CORS이슈가있으면 response, request가 되지 않습니다. 

이에 대해서 여러가지 방법이 있는데 

1. ajax의 dataType을 jsonp 로 바꾸는 법 

2. 헤더의 크로스 도메인 을 허가하는 방법 

  -> PHP  header("Access-Control-Allow-Origin: *");

  -> JSP  <% response.addHeader("Access-Control-Allow-Origin","*"); %>

3.  Node에서는 cors 모듈을 설치 하는 법

현재는 NPM에 대한 이야기 이므로  cors 모듈을 설치하여서 해결하는 방법이 있습니다.

express-cors 도있고 cors도 있는데  express-cors는 npm 검색시에도 잘 나오지 않고 npm에서 cors로 검색시에 가장 인기가 많은 cors 모듈을 사용하였으니 해당 모듈에 대해서 간단하게 

소개하겠습니다.

cors 검색하게되면 가장 상단에 

Node.js CORS middleware 2.8.4 가 보일 겁니다. 해당 클릭 

설명에 보시면  Connect/Express middleware that can be used to enable CORS with various options.

cors를 활성화 해준다고 되어있습니다. 여러 기능도 포함하여서

설치

-> npm 모듈이기 때문에 npm 으로 설치 합니다. 해당 설명도 진행할수록 생략 하도록 하겠습니다.

npm install cors

사용

npm cors 페이지 참조 

1. 모든 도메인 요청 활성화(모든 작업 CORS 허용 테스트용)

// 익스프레스 모듈 require 및 app 설정 (해당 방식은 express 에서 사용하도록 한 규약? 같은 방식)

var express = require('express')

var app =express();

// install cors 로 설치 하였기 때문에 cors 모듈 require

var cors = require('cors')

// cors () 사용  // 모든 도메인에 대한 Request 활성화  -> 좋지 않은 방식 

app.use(cors());

사용

2. 싱글 라우트에 대한 도메인 활성화(특정 작업에 대해서만 CORS허용)

// 익스프레스 사용

var express = require('express');

var app = express();

// cors 사용

var cors = require('cors');

// ***********  products/:id 에 대한 url 라우팅시에만  cors 를 허용 

app.get('/products/:id', cors(), function(req,res,next) {

res.json({msg:'This is CORS-enabled for a single Route'});

})

사용

3. CORS Config settings(setting 값을 수정하여서 CORS 허용 IP지정)

var express = require('express');

var app = expresS();

var corsOptions = {

origin :'http://example.com',

optionsSuccessStatus:200; // IE 11이나 여러 스마트 TV들에 대한 확인 

};

app.get('/products/:id',cors(corsOptions),function(req,res,next){

res.json({msg:' This is CORS-enabled for only example.com.'});

});

사용

4. CORS w/ Dynamic Origin  동적으로 읽어서 사용 

whitelist 배열을 push 로 추가하여서 실시간으로 허용 및 제거 가능 

// 앞 부분 생략

var whitelist = ['http://example1.com','http://example2.com']

var corsOptions = {

origin: function(origin,callback)    {

if(whitelist.indexOf(origin) !==-1){

callback (null,true);

} else{

callback (new Error('Not allowed by CORS'))

}

}

}

app.get('/products/:id', cors(corsOptions),function(req,res,next){

res.json({msg: 'This is CORS-enabled for a whitelisted domain.'})

});

5. ETC CORS pre-Flight  CORS 비동기 사용 , CORS 제거 등에 대한 내용은

www.npmjs.com 에 cors 검색 후 확인 하시면 될것 같습니다.