CORS - Express편

CORS와 관련하여 여러 정보를 얻고 싶으시면 아래의 글을 참고해 주세요.

[FrontEnd] - CORS - 개념편

[AWS] - CORS - AWS편

 

---

지난 포스팅에는 API Gateway에서 CORS를 허용하는 방법에 대해서 적용했었다.

사실상 HTTPS를 달려고 하면 CORS가 강제가 되는 상황에서 API Gateway를 사용하지 않을 경우에는 적용을 어떻게 하는지에 대한 것을 설명하기 위해서 포스팅을 마저 작성하게 되었다.

이번 포스팅에서는 Express에서 CORS를 허용하는 방법에 대해서 설명하려 한다.

 

자, 그러면 이제부터 Express에서 CORS를 허용하는 방법에 대해서 알아보자.

 

Express에서 CORS를 허용하는 방법

기본 세팅

Express에서 CORS를 허용하기 전에 우선 기본적인 세팅부터 시작해 보자.

 * npm이 Local 환경에서 설치가 되어 있다는 가정으로 진행하겠습니다.

1. 연습할 폴더(CORS_Exp)를 생성한다.
2. 우리는 연습이기 때문에 간편하게 express-generator를 이용하려 한다. 

npm i -g express-generator@4
express --no-view --git Blog-01 && cd Blog-01
    # --no-view : 뷰를 위한 엔진(pug, ejs 등)을 만들지 않는다는 옵션
    # --git : .gitignore를 자동으로 만들어 달라는 옵션
	# 여기서 Blog-01은 폴더를 생성하기 위한 커맨드로 본인 위치에 맞게 입력하면 된다.
npm i

 

위의 과정을 정상적으로 진행하였을 경우 아래의 이미자와 같은 폴더 트리를 볼 수 있다.

이제 우리가 Express에서 CORS를 허용하기 위하여 사용할 모듈인 CORS를 설치하자.

npm i cors

 

express-generator가 생성해 준 코드에는 기본 경로인 “/” 에는 간단한 html을 연결하는 라우터가 연결되어 있고, /users에는 사용자의 정보를 위한 라우터가 연결이 되어 있지만 우리는 간단하게 CORS가 적용이 되는지 테스트해 보는 것이 주목적이기 때문에 추가적인 라우터를 만들거나 하지 않을 예정이다.

우선 아무것도 적용하지 않았을 때의 CORS에 대한 응답이 오는지 확인해 보자.

아래의 명령어를 통해 서버를 시작해 보자.

npm start

서버는 정상적으로 동작하고 이제 다른 터미널을 이용하거나, Postman을 이용하여 OPTIONS 요청을 보내보자.

curl -v -X OPTIONS http://localhost:3000/users

현재의 응답은 Access-Control-Allow-Origin, Access-Control-Allow-Methods와 같은 응답이 돌아오지 않기 때문에 CORS 정책에 위반된다.

 

---

 

모든 요청에 CORS 허용하기

자 이제부터 CORS를 본 프로젝트에 적용해 보자.

기본적으로 node의 http모듈을 호출하는 것은 /bin/www에서 선언하지만 우리는 주로 최상위 폴더에 있는 app.js를 이용하면 된다.

express-generator가 편리하게 기본적인 코드들을 생성해 주었기 때문에 app.js에서 아래의 이미지와 같이 두줄을 추가해 주자.

두줄의 코드는 아래와 같다.

var cors = require('cors');

app.use(cors());

 

이제 모든 요청에 대한 CORS 적용이 끝이 났다.

참고로 해당 코드는 All Open으로 설정하여 적용을 한 상태이다.

 

이제 다시 서버를 시작해 보자.

(기존 서버를 종료하는 방법은 Ctrl + c를 누르게 되면 서버가 종료된다.)

npm start

 

서버가 시작되면 아까와 같은 curl을 보내보자.

curl -v -X OPTIONS http://localhost:3000/users

이번의 응답에서는 아래의 이미지와 같이 Access-Control-Allow-Origin, Access-Control-Allow-Methods가 헤더에 담겨 제대로 오기 때문에 CORS 정책을 허용된다.

 

---

특정 경로에 CORS 허용하기

지금 까지는 모든 경로에 대하여 CORS를 허용하는 것을 하였다.

이번에는 특정 도메인으로부터 특정 경로만 허용하는 것을 목표로 테스트를 해 보자.

 

기존 app.js에서 작업했던 코드를 주석 처리를 하고 이후 “/routes/users.js” 파일에서 코딩을 해야 한다.

여기서 우선 처음 작업할 것은 CORS에 대한 옵션을 설정하는 과정이 필요하다.

 

테스트를 위한 코드로는 router 밑에 아래의 코드를 추가하면 된다.

var express = require('express');
var router = express.Router();
var cors = require('cors');

var corsOptions = {
  "origin": "*",
  "methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
  "preflightContinue": false,
  "optionsSuccessStatus": 200
};

router.options('/cors', cors(corsOptions), function(req, res, next) {
  res.send('respond with a resource');
});

router.get('/cors', cors(corsOptions), function(req, res, next) {
  res.send('respond with a resource');
});

router.get('/no-cors', cors(corsOptions), function(req, res, next) {
  res.send('respond with a resource');
});

module.exports = router;

 

corsOptions안의 옵션으로는

• origin : 헤더에 Access-Control-Allow-Origin가 추가되며 특정 도메인에서 접근을 허용할 때 사용된다.
• method : 헤더에 Access-Control-Allow-Method가 추가되며 특정 메서드(GET, HEAD, PUT 등)의 접근을 허용할 때 사용된다.
• preflightContinue : express에서는 OPTIONS와 같은 메서드가 구현이 되어 있어 자동적으로 다음 핸들러로 넘어갈 때 해당 메서드를 그대로 전달할 것인지에 대한 옵션이다. 우리가 express를 딥하게 사용해서 다음 핸들러에서 특정한 처리를 하지 않는 이상 false로 설정해 두는 것이 좋다.
• optionsSucessStatus : OPTIONS메서드에서 응답을 보낼 때 200으로 보낼지 204로 보낼지에 대한 설정을 하는 옵션이다. IE11이나 특정 브라우저에서는 204로 설정이 되어야만 CORS가 Allow 된다고 하지만 대부분의 브라우저에서는 200으로 설정해도 무방하다.

이외의 cors모듈의 자세한 옵션 값은 아래의 링크에 설명이 되어있다.

https://github.com/expressjs/cors#configuration-options

 

자 이제 CORS가 잘 적용이 되었는지 확인해 보자.

 

서버를 시작하고

npm start

우선 no-cors로 OPTIONS 요청을 보내 보자.

curl -v -X GET http://localhost:3000/users/no-cors

Access-Control-Allow-Origin에 대한 응답을 받는 것을 볼 수 있다.

하지만 이 코드는 대부분의 브라우저에서 CORS를 Allow하지 않는다. 그 이유는 이론에서 설명했듯이 Pre-flight에 대한 선언이나 별도의 코드가 없기 때문이다.

브라우저에서 통신할 때에는 OPTIONS를 먼저 보내고 Allow가 되었을 때 GET, POST와 같은 요청을 보내기 때문에 사전 요청인 Pre-flight에서 막혀 허용이 되지 않는 것이다.

 

그렇다면 이제 앞선 코드에서 OPTIONS로 주었던 요청을 해 보자.

curl -v -X OPTIONS http://localhost:3000/users/cors

응답 값에서 Access-Control-Allow-Origin과 Access-Control-Allow-Method 같은 우리가 설정에서 허용한 옵션을 볼 수 있다.

 

이렇게 되었을 때 브라우저 엔진에서 Pre-flight는 Allow가 된 것으로 파악하고 다시 정상적인 요청을 진행할 것이다. 우리도 브라우저와 같이 동일한 프로세스를 따라 해 보자.

curl -v -X GET http://localhost:3000/users/cors

GET에서도 Access-Control-Allow-Origin헤더를 볼 수 있으며 이렇게 되었을 경우 모든 브라우저에서 CORS가 Allow가 되는 것을 알 수 있다.

 

CORS에 대한 더욱 자세한 설정 방법이나 개별적으로 적용하는 방법은 아래의 깃허브에서 README를 보면 알 수 있다.

https://github.com/expressjs/cors