CORS(Cross-Origin Resource Sharing) 이해하기

CORS란?

CORS(Cross-Origin Resource Sharing)는 우리의 웹 애플리케이션을 안전하게 지켜주는 보안 메커니즘입니다. 다른 출처(Origin)의 리소스를 안전하게 사용할 수 있도록 해주는 표준 메커니즘입니다.

CORS 오류 발생 원인

브라우저의 '동일 출처 정책' 때문에 발생하며, 다음과 같은 경우에 CORS 오류가 발생합니다:

• 프로토콜이 다른 경우 (http vs https)
• 도메인이 다른 경우 (example.com vs api.example.com)
• 포트가 다른 경우 (3000 vs 8080)

해결 방법

서버 측 해결방법

app.use((req, res, next) => {
  // 모든 도메인 허용 (개발 환경에서만 사용)
  res.header("Access-Control-Allow-Origin", "*");

  // 또는 특정 도메인만 허용 (권장)
  res.header("Access-Control-Allow-Origin", "https://example.com");
});

프론트엔드 해결방법

1. 개발 환경에서 프록시 서버 설정하기
2. http-proxy-middleware 활용하기
3. 프록시 서버 사용하기

피해야 할 방법

1. 크롬 브라우저의 보안 설정을 비활성화
2. 모든 출처 허용 (Access-Control-Allow-Origin: *)

권장하는 방법

1. 필요한 출처만 최소한으로 허용하기
2. 프리플라이트 요청 올바르게 처리하기
3. 인증이 필요한 요청은 credentials 설정 확인하기

결론

CORS는 웹 애플리케이션을 보호하는 중요한 보안 장치입니다. 개발 단계에서는 프록시 서버를 활용하고, 실제 서비스 환경에서는 서버에서 신중하게 설정하는 것이 바람직합니다.

개발 시에는 편의성을 위해 프록시를 사용하되, 프로덕션 환경에서는 보안을 고려하여 필요한 출처만 허용하는 것이 좋습니다. 특히 인증이 필요한 요청의 경우 더욱 신중한 설정이 필요합니다.