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

1. 일반 Chrome으로 접속 시:

   JavaScript⧉복사

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

2. 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 오류가 발생하는 경우#

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

결론#

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

권장 순서:

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

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

참고 자료#

• MDN: CORS↗(새 창)
• Chrome Command Line Switches↗(새 창)
• CORS 정책 이해하기↗(새 창)