Node.js에서 CORS 허용 설정

🙄CORS란?

CORS(Cross-Origin Resource Sharing)는 브라우저의 보안 정책 중 하나로, 서로 다른 출처(도메인, 프로토콜, 또는 포트)의 리소스에 접근할 때 발생하는 문제를 해결하기 위해 사용된다.

예를 들어, 클라이언트 애플리케이션이 http://localhost:3000에서 실행되고, 서버 API가 http://localhost:8080에서 동작할 때, 브라우저는 다른 출처로 간주하여 기본적으로 서버 API에 접근을 차단한다.

CORS 설정을 통해 특정 출처에서 서버에 접근할 수 있도록 허용해주면, 클라이언트가 서버 리소스에 접근할 수 있게된다.

✅Node.js에서 CORS 허용 설정

Node.js에서 CORS를 허용하기 위해 CORS 미들웨어를 설치하고 설정할 수 있다. Express와 함께 사용하는 경우가 많으므로, Express 환경에서의 설정 방법을 예를 들어보겠다.

1. 아래 명령어로 CORS 미들웨어를 설치한다

   npm install cors

   추가로 타입스크립트로 사용할 경우 cors의 타입 정보를 알기 위해 아래 명령어로 @types/cors 패키지를 추가로 설치해주자

   npm install @types/cors

2. 모든 request에 대해 CORS 요청을 설정하기

    import express, { Request, Response } from "express";
    import cors from "cors";
   
    const app = express();
   
    app.use(cors()); // 미들웨어로 CORS 활성화
   
    app.get("/", (req: Request, res: Response): void => {
      res.send("hello world");
    });
   
    app.listen(8080, () => console.log("8080번 포트 "));
   

3. 선택적인 출처에 대한 CORS 허용하기

   import express, { Request, Response } from "express";
   import cors from "cors";
   
   const app = express();
   
   //선택적인 출처에 대해서만 CORS 활성화
   const corsOptions = {
   	origin: 'http://localhost:3000'
   }
   
   app.use(cors(corsOptions));
   
   app.get("/", (req: Request, res: Response): void => {
    res.send("hello world");
   });
   
   app.listen(8080, () => console.log("8080번 포트 "));
   

4. CORS 옵션 커스터마이징 하기

      const corsOptions = {
         origin: 'http://localhost:3000', // 특정 출처
         methods: ['GET', 'POST'],        // 허용할 HTTP 메소드
         allowedHeaders: ['Content-Type', 'Authorization'], // 허용할 헤더
         credentials: true                // 자격 증명 허용 (쿠키 전송 허용)
   };
   
       app.use(cors(corsOptions));