BEB Section 2 - Web Server 기초

What is CORS?

 예전에는 서버와 클라이언트가 상호통신 관계였기 때문에 그에 대해 위반한다거나 위해하는 행동을 하지 않는다고 생각했었다. 클라이언트에서 서버로 요청하면 origin이 나타나고, same origin이기 때문에 그에 대해 막을 필요성을 느끼지 못했기 때문에 더더욱 의심의 여지 또한 없었다.

 하지만 Single Page Application 기술이 등장해 고도화된 웹 서비스가 나타나게 되면서 여러 API를 사용하게 되었고, 여러 곳에 있는 리소스를 활용할 필요가 생겼다. 그렇게 cross origin 기법을 요청하게 되었다.

 MDN 자료에 따르면, 서버에서 어떠한 요청을 할지 모르고 확인이 불가하기 때문에 보안상의 이유로 cross origin의 요청이 제한되었는데, 서버가 허용한 범위 내에서 요청을 허용할 수 있도록 cross domain을 요청했다고 한다.

 

const defaultCorsHeaders = {
  'access-control-allow-origin' : '*',
  'access-control-allow-methods' : 'GET, POST, PUT, DELETE, OPTIONS',
  'access-control-allow-headers' : 'content-type, accept',
  'access-control-max-age' : 10
};

 

 대표적인 CORS 코드이다. 짠 게 아니라 디폴트 값으로 준 겁니다.

• access-control-allow-origin : *  →  모든 도메인 허용
• access-control-allow-methods : GET, POST, PUT, DELETE, OPTIONS  →  지정한 메소드만 사용 가능 
• access-control-allow-headers : content-type, accept →  지정한 헤더만 사용 가능
• access-control-max-age : 10  →  preflight request 는 10초까지 허용

 한다는 고정적인 값을 준 것이다. 그래서 const가 쓰인 것이고.

 

 

Node.js Express

 Express.js 는 Node.js 환경에서 웹 서버, API 서버를 제작하기 위해 사용되는 프레임워크이다. 이 친구의 편한 점은

1. 미들웨어 추가 편리
2. 자체적 라우터 제공

https://github.com/cliffclimber-721/simple-express.git

GitHub - cliffclimber-721/simple-express: Just an simple code of how to code with Express framework

 

 어떤 식으로 돌아가는지 대충 코드를 올렸다. 아마 또 Express로 작업할 날이 올 것 같아서 미리 깃을 만들어두는 것이지만..

 짜여진 코드는 깃허브에서 확인 가능하고, 이렇게 node simple-app.js 로 실행시키면 내가 지정했던 포트 번호와 함께 localhost로 열리게 된다. 그래서 나오는 결과물은

짜잔!

 이렇게 새 화면과 함께 출력되는 것을 볼 수 있다.

 

 

Middleware(미들웨어)

 middleware은 express의 가장 큰 장점이다. 사용하는 상황은 총 4가지가 있다.

 

1. 모든 요청에 대해 URL 이나 메소드를 확인할 때
2. POST 요청 등 포함된 payload를 구조화하여 쉽게 얻어내고자 할 때
3. 모든 request와 response에 대해 CORS 헤더를 붙여야할 때
4. requested 헤더에 사용자 인증 정보가 담겨있는지 확인할 때

 

 middleware를 이용하면 node.js로만 구현한 서버에서는 번거로울 수 있는 작업을 보다 쉽게 적용 가능하다.

 

• POST 요청 등 포함된 payload를 구조화하여 쉽게 얻어내고자 할 때

https://github.com/expressjs/body-parser

GitHub - expressjs/body-parser: Node.js body parsing middleware

 

 순수 node.js로 작성할 경우에는 buffer 값을 받아 복잡한 방식으로 payload 를 받는다. 하지만 위 깃허브를 clone 해서 사용하게 되면 과정이 간단하게 처리된다.

 

const bodyParser = require("body-parser");
const jsonParser = bodyParser.json();

// 중간 코드 생략
app.post("/api/users", jsonParser, function(req, res) {
	// req에 대한 payload가 JSON 형태로 담겨져 있다.
})

 

 

• 모든 request와 response에 대해 CORS 헤더를 붙여야할 때

https://github.com/expressjs/cors

GitHub - expressjs/cors: Node.js CORS middleware

 

 위에 설명에서 CORS headers 에 대해 설명한 부분이 있다. 그런데 이것도 미들웨어를 사용하게 되면 간편해진다. 이렇게 작성하면 모든 request 에 CORS를 허용하게 된다. 아님 특정 요청에만 CORS 모듈을 적용할 수도 있다.

 

const cors = require("cors");

// 위 과정은 생략
app.use(cors());

 

 

• 모든 요청에 대해 URL 이나 메소드를 확인할 때

 미들웨어는 프로세스 중간에 관여하여 특정 역할을 수행하는 것을 말한다. 예시로 logger를 들자면, logger는 디버깅이나 서버 관리에 도움이 되기 위해 console.log를 통해 데이터나 정보를 출력해준다. 미들웨어의 구성은 다음과 같다.

 

const express = require("express");
const app = express();

const LoggerEx = function(req, res, next) {
  console.log("Logging");
  next();
};

app.use(LoggerEx);

app.get("/", function(req, res) {
  res.send("Hello World!");
});

app.listen(3000);

 

• app.get : 미들웨어 함수가 적용되는 HTTP 메소드
• /(endpoint) : 미들웨어 함수가 적용되는 경로
• function(req, res, next) : 미들웨어 함수 적용
• req : 미들웨어 함수에 대한 request argument
• res : 미들웨어 함수에 대한 response argument
• next : 미들웨어 함수에 대한 callback argument

next() 함수를 호출해 다음 미들웨어로 데이터를 전달할 수 있다. 위가 그에 대한 예시 코드 블럭이다.