CORS(Cross-Origin Resource Sharing) 문제와 해결 방법

by

CORS(Cross-Origin Resource Sharing)는 웹 애플리케이션에서 다른 출처(origin)로부터 리소스를 요청할 때 발생하는 보안 정책입니다. 이 정책은 브라우저에서 실행되며, 웹 애플리케이션이 다른 출처에서 데이터를 요청할 때 요청을 허용하거나 차단하는 역할을 합니다. 이 글에서는 Nest.js로 백엔드를 개발하고 Next.js로 프론트엔드를 개발하는 웹 애플리케이션에서 CORS 문제가 발생하는 원인과 해결 방법에 대해 알아보겠습니다.


CORS 문제의 원인

CORS 문제는 주로 다음과 같은 상황에서 발생합니다.

  1. 다른 출처에서의 API 요청: Next.js 프론트엔드 애플리케이션에서 Nest.js 백엔드로 API 요청을 보낼 때, 브라우저는 요청을 차단할 수 있습니다. 이는 보안상의 이유로 브라우저에서 적용되는 정책입니다.
  2. Nest.js 서버의 CORS 설정: CORS 문제는 백엔드에서 발생할 수도 있습니다. Nest.js 서버는 CORS를 허용하도록 구성되어 있어야 합니다.



CORS 문제 해결 방법

CORS 문제를 해결하기 위해서는 다음과 같은 방법을 고려할 수 있습니다.


1. Nest.js 서버의 CORS 설정

Nest.js 백엔드 서버에서 CORS를 허용하도록 구성해야 합니다. 이를 위해 @nestjs/platform-express 모듈의 CorsMiddleware를 사용하여 CORS 설정을 추가할 수 있습니다.

// main.ts (Nest.js 서버 진입점)

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { CorsOptions } from '@nestjs/platform-express/interfaces/external/cors-options.interface';

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

  // CORS 설정
  const corsOptions: CorsOptions = {
    origin: 'http://localhost:3000', // 프론트엔드 앱의 도메인을 지정
    credentials: true, // 인증 정보 (쿠키 등)를 포함할 경우 true로 설정
  };
  app.enableCors(corsOptions);

  await app.listen(3001); // Nest.js 서버 포트
}
bootstrap();

위의 코드에서 origin 옵션을 프론트엔드 앱의 도메인으로 설정하고, 필요에 따라 credentials 옵션을 true로 설정하여 인증 정보를 포함할 수 있습니다.


2. Next.js에서 API 요청 설정

Next.js 프론트엔드 애플리케이션에서 API 요청을 보낼 때, 요청에 CORS 관련 헤더를 추가해야 합니다. fetch 함수를 사용하여 API 요청을 보낼 때 credentials 옵션을 설정하여 CORS 요청을 만들 수 있습니다.

fetch('http://localhost:3001/api/data', {
  method: 'GET',
  credentials: 'include', // CORS 요청을 위한 설정
})
  .then((response) => response.json())
  .then((data) => {
    // 데이터 처리
  })
  .catch((error) => {
    // 에러 처리
  });

credentials 옵션을 ‘include’로 설정하여 요청에 쿠키를 포함시킬 수 있습니다.


3. 프록시 서버 사용

프록시 서버를 사용하여 CORS 문제를 해결할 수도 있습니다. 프록시 서버는 클라이언트 애플리케이션과 백엔드 서버 사이에 위치하며, 클라이언트에서 프록시 서버로 요청을 보내면 프록시 서버가 백엔드로 요청을 전달합니다. 프록시 서버는 백엔드와의 통신에서 CORS 문제를 해결해야 합니다.

이러한 방법 중 하나를 선택하여 CORS 문제를 해결할 수 있습니다. Nest.js 서버와 Next.js 프론트엔드 간의 통신에서 발생하는 CORS 문제를 해결하면, 웹 애플리케이션을 더욱 원활하게 개발하고 실행할 수 있을 것입니다.




Leave a Comment