[WEB] CORS

학습 키워드

• CORS

학습정리

1. CORS의 기본 개념

• CORS란?
  • 브라우저 보안 정책 중 하나인 동일 출처 정책(Same-Origin Policy)을 우회하기 위해 사용됨.
  • 클라이언트가 다른 출처(다른 도메인, 프로토콜, 또는 포트)에 요청을 보낼 때, 서버가 이 요청을 허용할지 결정함.
• 동일 출처 정책
  • 브라우저는 보안상의 이유로, 클라이언트에서 시작된 요청이 동일한 출처에서만 허용되도록 제한.
  • 예를 들어, https://example.com에서 실행 중인 JavaScript는 기본적으로 https://another.com에 요청을 보낼 수 없음.
• CORS 허용 예시
  • REST API 서버: https://api.myserver.com
  • 클라이언트: https://myfrontend.com
  • 서버가 https://myfrontend.com에서 오는 요청을 허용하려면 CORS 설정 필요.

---

2. CORS에서 중요한 헤더

• 클라이언트 요청 헤더
  • Origin: 요청을 보낸 출처를 명시. 서버가 이 출처를 확인해 응답 여부 결정.
• 서버 응답 헤더
  • Access-Control-Allow-Origin: 요청을 허용할 출처를 지정.
    • 예: ``(모든 출처 허용) 또는 특정 출처 (https://myfrontend.com).
  • Access-Control-Allow-Methods: 허용할 HTTP 메서드 명시 (GET, POST, DELETE 등).
  • Access-Control-Allow-Headers: 클라이언트가 사용할 수 있는 헤더 지정.
  • Access-Control-Allow-Credentials: 쿠키를 포함한 인증 정보 허용 여부 설정.

---

3. CORS의 종류

1. Simple Requests (단순 요청)
   • GET, POST, HEAD 요청이고, 커스텀 헤더나 인증 정보가 없는 요청.
   • 서버는 바로 응답을 반환.
2. Preflight Requests (사전 요청)
   • OPTIONS 메서드를 사용하여 서버가 요청을 허용할지 확인.
   • 커스텀 헤더, 비표준 메서드, 또는 인증 정보가 포함된 경우 발생.
3. Credentialed Requests (인증 요청)
   • 인증 정보를 포함하여 요청하는 경우 (예: 쿠키).
   • Access-Control-Allow-Credentials를 true로 설정해야 함.

---

4. NestJS에서 CORS 설정

NestJS에서는 @nestjs/common 모듈의 CORS 옵션을 활용하여 손쉽게 설정 가능.

4.1. CORS 기본 활성화

• main.ts에서 CORS 활성화

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  // CORS 활성화
  app.enableCors();

  await app.listen(3000);
}
bootstrap();

4.2. CORS 옵션 커스터마이징

• 특정 출처와 조건만 허용하는 설정

app.enableCors({
  origin: ['<https://myfrontend.com>'], // 허용할 도메인
  methods: ['GET', 'POST', 'PUT', 'DELETE'], // 허용할 HTTP 메서드
  allowedHeaders: ['Content-Type', 'Authorization'], // 허용할 헤더
  credentials: true, // 쿠키 및 인증 정보 허용
});

---

5. CORS와 Interceptor

Interceptor로 CORS 헤더를 직접 추가하거나 요청/응답을 제어할 수 있음

import {
  CallHandler,
  ExecutionContext,
  Injectable,
  NestInterceptor,
} from '@nestjs/common';
import { Observable } from 'rxjs';

@Injectable()
export class CorsInterceptor implements NestInterceptor {
  intercept(context: ExecutionContext, next: CallHandler): Observable {
    const response = context.switchToHttp().getResponse();
    response.setHeader('Access-Control-Allow-Origin', '<https://myfrontend.com>');
    response.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
    response.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    response.setHeader('Access-Control-Allow-Credentials', 'true');
    return next.handle();
  }

---

6. CORS 설정 시 주의점

1. 와일드카드 사용
   • Access-Control-Allow-Origin에 `` 사용 시, credentials: true를 설정할 수 없음.
   • 예: 쿠키 인증 사용 시, 반드시 특정 도메인을 명시해야 함.
2. Preflight 요청 허용
   • 클라이언트의 사전 요청을 허용하지 않으면 문제가 발생. OPTIONS 메서드 응답을 반드시 설정해야 함.
3. 환경 변수와 통합
   • CORS 설정 값을 .env 파일로 관리하여 환경별로 쉽게 전환 가능:

   app.enableCors({
     origin: process.env.CORS_ORIGIN, // .env에서 읽어옴
     credentials: process.env.CORS_CREDENTIALS === 'true',
   });
   

---

7. CORS 문제 디버깅

1. 콘솔 에러 확인
   • 브라우저의 개발자 도구에서 "CORS policy error"를 확인.
   • 예: No 'Access-Control-Allow-Origin' header is present on the requested resource.
2. Network 탭에서 요청 확인
   • Preflight 요청이 실패했는지, 서버 응답에 필요한 헤더가 빠졌는지 확인.
3. 서버 로그 확인
   • 서버에서 요청 로그를 출력해 CORS 요청이 어떻게 처리되는지 확인.