트러블 슈팅: CORS ‐ Preflight 요청 에러 해결 - minumsa/carver-music GitHub Wiki

문제 상황

로컬호스트에서 데이터 조회 API를 호출할 때 다음과 같은 CORS 에러가 발생했습니다. 데이터 조회 API를 호출할 때 실제 사이트를 배포한 도메인 https://music.divdivdiv.com으로 URL 경로를 잡았는데, 로컬호스트에서 작업할 때는 도메인이 http://localhost:3000으로 설정되어 SOP를 위반하기 때문이었습니다.

CORS - Preflight Request 에러

해결 과정

환경변수 활용

CORS 에러의 원인은 브라우저가 동일출처 정책(Same-Origin Policy)을 위반하는 요청을 차단하기 때문입니다.

이를 방지하기 위해 NEXT_PUBLIC_BASE_URL이라는 환경변수를 만들었습니다. 이를 통해 서버 코드에서는 .env 파일의 변수값을, 배포된 실제 사이트에서는 Vercel의 환경변수 설정란에 저장해둔 변수값을 적용해 CORS 설정을 동적으로 작동시켰습니다.

// album.ts

export async function fetchAlbumDataCSR(albumFilters: AlbumFilters) {
  try {
    // ...
    const url = `${BASE_URL}/api${queryString}`;

    const response = await fetch(url, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
    });

    // ... 
  } catch (error) {
    // ...
  }
}

// apiURLs.ts

require("dotenv").config();
export const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;

// .env

NEXT_PUBLIC_BASE_URL="http://localhost:3000"

Vercel - 환경변수 설정 화면

배운 점

• 환경변수를 사용해 CORS 설정을 관리하는 방법의 중요성을 배웠습니다.
• 서버와 클라이언트 코드 모두에서 환경변수를 통해 설정값을 동적으로 적용함으로써, 개발 환경과 배포 환경 간의 설정을 쉽게 관리할 수 있다는 점을 알게 되었습니다.
• 특히, 보안과 관련된 설정값을 코드에 직접 하드코딩하지 않음으로써 코드의 보안을 향상시킬수 있음을 깨달았습니다.