[Node.js]CORS 설정

목차

 

CORS

 

CORS란 Cross-Origin Resource Sharing, 번역하면 교차 출처 리소스 공유의 줄임말이며,

 

한 마디로 말하자면 다른 도메인, 프로토콜, 포트에서 실행 중인 웹 페이지의 서버 접근을 제한하는 정책이다.

 

나머지 설명은 이전 글로 대체한다.

 

[네트워크]CORS(Cross-Origin Resource Sharing)

[네트워크]CORS(Cross-Origin Resource Sharing)

[면접 준비 - Network]CORS에 대하여 - 1

[면접 준비 - Network]CORS에 대하여 - 1

[면접 준비 - Network]CORS에 대하여 - 2

[면접 준비 - Network]CORS에 대하여 - 2

이 글에서는 Node.js로 서버 구성시 CORS 정책을 구현하는 법에 대해 알아보겠다.

 

npm install cors

 

먼저 늘 그렇듯이 라이브러리를 설치 해준다.

npm install cors

이어서 타입스트립트에서 사용하기 위한 타입 정의를 설치한다.

npm install @types/cors

 

Configuration

 

서버 파일에 바로 작성해도 되지만, 어쩐지 모듈로 독립시켜야 할 것만 같아 독립시키기로 했다.

 

내 프로젝트 기준 src/config 폴더 아래에 cors.ts를 생성한다.

 

그리고 이후의 구현은 필요에 따라 하면 되는데, 여기서 가능한 예를 하나 들어보겠다.

import cors from 'cors';

const corsOptions: cors.CorsOptions = {
  origin: ['http://localhost:8080', 'http://example.com'],
  methods: ['POST', 'GET', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  exposedHeaders: ['Auth-Token'],
  credentials: false,
  maxAge: 3600,
};

export default cors(corsOptions);

 

• origin: 요청을 허용할 출처를 가리킨다. 배열 대신 '*'를 입력하면 모든 출처는 요청을 허용한다. 이는 아래도 마찬가지다.
• method: 허용할 HTTP 메서드를 지정한다.
• allowedHeaders: 허용할 HTTP 헤더를 지정한다.
• exposedHeaders: 브라우저가 액세스 할 수 있는 헤더를 지정한다.
• credential
  Access-Control-Allow-Credentials CORS 헤더를 보낼지 여부를 결정한다. 이를 허용하면 응답을 JS 코드에
  노출시키기 때문에 보안에 매우 취약해진다. 스프링으로 개발할 때는 보통 false로 두었다.
• maxAge: preflight 요청, 즉 CORS 요청 결과를 캐싱하는 시간이다. 설정하지 않으면 기본값은 없다.

 

server.ts

 

마지막으로 서버 모듈에 해당 정책을 적용하고 끝내자.

 

아래와 같이 적으면 끝이다.

import express from 'express';
import cors from './config/cors';

const app = express();

app.use(cors);

개발을 처음 시작할 때는 CORS라는 개념 자체가 어려워서

 

게시판 하나 만들 때도 어마어마한 노력을 기울여야 했는데

 

노드에선 뭐든지 쉽게 끝나는 것 같아 억울하다(?)

 

끝!