Chrome CORS 비활성화: 로컬 개발 시 Cross-Origin 문제 해결하기

로컬에서 개발하다 보면 CORS(Cross-Origin Resource Sharing) 오류를 자주 만나게 됩니다. 특히 프론트엔드와 백엔드를 분리해서 개발하거나, 다른 포트에서 API를 호출할 때 발생합니다.

CORS 오류 예시:

Access to fetch at 'http://localhost:3000/api/data' from origin 'http://localhost:3001' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present 
on the requested resource.

이런 경우, 개발 단계에서만 Chrome의 웹 보안을 임시로 비활성화하여 빠르게 개발을 진행할 수 있습니다. 단, 이 방법은 개발 환경에서만 사용하고, 절대 프로덕션에서는 사용하지 마세요.

OSX (macOS)

터미널에서 다음 명령어를 실행합니다:

open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security

명령어 설명:

open -n: 새로운 Chrome 인스턴스 실행
-a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome: Chrome 실행 파일 경로
--user-data-dir="/tmp/chrome_dev_test": 임시 사용자 데이터 디렉토리 지정 (기본 프로필과 분리)
--disable-web-security: 웹 보안 비활성화 (CORS 포함)

주의사항:

이 방법으로 실행된 Chrome은 보안이 비활성화된 상태입니다
개발용으로만 사용하고, 일반 브라우징에는 사용하지 마세요
브라우저 상단에 "You are using an unsupported command-line flag" 경고가 표시됩니다

Windows

방법 1: 명령 프롬프트에서 실행

"[PATH_TO_CHROME]\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp

Chrome 기본 경로 예시:

"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=C:\chromeTemp

방법 2: 사용자 데이터 디렉토리 지정

"[PATH_TO_CHROME]\chrome.exe" --user-data-dir="C://Chrome dev session" --disable-web-security

명령어 설명:

--disable-web-security: 웹 보안 비활성화
--disable-gpu: GPU 가속 비활성화 (선택사항)
--user-data-dir: 임시 사용자 데이터 디렉토리 지정

Linux

google-chrome --disable-web-security

또는 사용자 데이터 디렉토리를 지정하려면:

google-chrome --user-data-dir="/tmp/chrome_dev" --disable-web-security

실제 사용 예시

시나리오: 로컬 API 서버와 통신

프론트엔드: http://localhost:3000 백엔드 API: http://localhost:8080

일반 Chrome으로 접속 시:

// CORS 오류 발생
fetch('http://localhost:8080/api/users')
  .then(res => res.json())
  .catch(err => console.error('CORS Error:', err));

CORS 비활성화 Chrome으로 접속 시:
- 위 명령어로 Chrome 실행
- http://localhost:3000 접속
- CORS 오류 없이 API 호출 가능

추가 옵션

특정 포트만 허용

# macOS
open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args \
  --user-data-dir="/tmp/chrome_dev_test" \
  --disable-web-security \
  --disable-features=IsolateOrigins,site-per-process

개발자 도구 자동 열기

# macOS
open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args \
  --user-data-dir="/tmp/chrome_dev_test" \
  --disable-web-security \
  --auto-open-devtools-for-tabs

더 나은 해결 방법

CORS 비활성화는 임시 방편일 뿐입니다. 실제로는 다음 방법들을 사용하는 것이 좋습니다:

1. 백엔드에서 CORS 헤더 추가

Express.js 예시:

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({
  origin: 'http://localhost:3000',
  credentials: true
}));

FastAPI 예시:

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

2. 프록시 사용 (Next.js, Vite 등)

Next.js next.config.js:

module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'http://localhost:8080/api/:path*',
      },
    ];
  },
};

Vite vite.config.js:

export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
};

3. 브라우저 확장 프로그램 사용

CORS Unblock (Chrome 확장 프로그램)
Allow CORS (Chrome 확장 프로그램)

하지만 확장 프로그램도 보안상 위험할 수 있으므로 개발 환경에서만 사용하세요.

보안 주의사항

⚠️ 중요:

CORS 비활성화는 개발 환경에서만 사용하세요
이 방법으로 실행된 Chrome은 보안이 취약합니다
민감한 정보가 있는 사이트에는 접속하지 마세요
개발이 끝나면 즉시 일반 Chrome으로 전환하세요
팀원들과 공유할 때는 이 주의사항을 함께 알려주세요

문제 해결

Chrome이 실행되지 않는 경우

macOS:

# Chrome이 실행 중이면 종료 후 다시 시도
killall "Google Chrome"
open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security

Windows:

작업 관리자에서 Chrome 프로세스 종료 후 다시 실행

여전히 CORS 오류가 발생하는 경우

캐시 삭제: Ctrl+Shift+Delete (Windows) / Cmd+Shift+Delete (macOS)
하드 리프레시: Ctrl+F5 (Windows) / Cmd+Shift+R (macOS)
다른 브라우저로 테스트: Firefox, Safari 등
백엔드 CORS 설정 확인: 서버 측에서 CORS 헤더가 올바르게 설정되었는지 확인

결론

Chrome의 CORS 비활성화는 로컬 개발 시 빠르게 문제를 해결할 수 있는 방법이지만, 임시 방편입니다.

권장 순서:

✅ 백엔드에서 CORS 헤더 추가 (가장 권장)
✅ 프록시 사용 (프론트엔드 프레임워크 지원 시)
⚠️ Chrome CORS 비활성화 (임시 방편)

개발이 완료되면 반드시 일반 Chrome으로 테스트하여 실제 환경에서도 정상 작동하는지 확인하세요!