거의 필수인 Express 미들웨어

하람·2024년 9월 26일

Express 서버

목록 보기
3/7
app.use(cors()); //cross-origin 설정
app.use(express.json()); // REST API body 파싱
app.use(express.urlencoded({ extended: false })); // HTML Form body 파싱
app.use(express.static("public")); // 정적 리소스 제공
app.use(cookieParser()); // request의 cookie 파싱
app.use(morgan("dev")); // 요청에대한 log 표시
app.use(helmet()); // 각종 보안관련된 header 세팅

cors

npm install cors
// app.js
const cors = require('cors');

app.use(cors());

별도의 처리가 없으면 모든 도메인에서 제한 없이 해당 서버에 요청을 보낼 수 있다.

let corsOptions = {
    origin: 'https://www.domain.com',
    credentials: true
}
app.use(cors(corsOptions));

참고로 셋쿠키 헤더 등의 기능을 위해서는 프론트엔드에서도 설정 해줘야한다.

// axios 설정 방법 
export const axiosInstance = axios.create({
  baseURL: PATH_API.API_DOMAIN,
  headers: {
    'Content-Type': 'application/json', // content-type 설정!
  },
  withCredentials: true, // 쿠키 cors 통신 설정!
});

morgan

npm i morgan
const morgan = require('morgan')

app.use(morgan("dev"));

comdined, common, dev가 있다.

https://velog.io/@blacksooooo/Node.js-morgan%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%84%9C%EB%B2%84-%EB%A1%9C%EA%B7%B8-%EB%82%A8%EA%B8%B0%EA%B8%B0

helmet

npm i helmet
import helmet from "helmet";

app.use(
  helmet({
    contentSecurityPolicy: false,
    xDownloadOptions: false,
  }),
);

https://inpa.tistory.com/entry/NODE-%EB%B3%B4%EC%95%88-%F0%9F%93%9A-helmet-%EB%AA%A8%EB%93%88-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%9B%B9-%EB%B3%B4%EC%95%88%EC%9D%80-%EB%82%B4%EA%B0%80-%F0%9F%91%AE

profile
강하고 담대하라 두려워하지 말라

1개의 댓글

comment-user-thumbnail
2024년 10월 8일

"별도의 처리가 없으면 모든 도메인에서 제한 없이 해당 서버에 요청을 보낼 수 있다."
가 조금 틀린 표현인 거 같습니다.
오히려 모든 "브라우저에서" 다른 "도메인" 요청이 브라우저에 의해 걸러집니다.

SOP(Same Origin Policy) 라는 정책이 브라우저에 걸려있습니다. 이는 다른 origin의 요청을 필터링(몇가지 방법이 있지만 요청과 응답까지 받고 걸러 버립니다.)
same origin이란 공식적으로는 프로토콜 + 호스트 + 포트 입니다. 다만 ie는 포트는 상관없습니다.

이를 우회하는 방법이 CORS로 리소스 제공자가 자신의 리소스가 어떤 origin에서 보여질 수 있는지 명시적으로 허용하는 것입니다.

따라서 CORS를 설정하지 않으면 다른 origin에서 보내는 요청이 브라우저 단에서 안보이게됩니다.

답글 달기