CORS(Cross-Origin Resource Sharing)에 대해

CORS

CORS는 간단한 비유로 설명하자면:
마치 식당의 "외부 음식 반입 금지" 정책과 비슷함.
기본적으로 웹브라우저는 다른 출처(도메인)의 리소스를 가져오는 것을 제한함.

실생활 예시:
1. 상황:

• shopping.com에서 운영하는 쇼핑몰 웹사이트가 있음.
• api.shopping.com이라는 별도의 API 서버가 있음.
• 쇼핑몰 웹사이트에서 API 서버의 데이터를 가져오려 함.

2. CORS 문제 발생:

• 브라우저: "잠깐! shopping.com에서 api.shopping.com의 데이터를 요청하네? 이건 출처가 다른데?"
• API 서버가 "이 요청은 괜찮아"라고 명시적으로 허용하지 않으면 브라우저가 요청을 차단함.

3. 해결 방법:
   API 서버에서 응답 헤더에 아래와 같은 허용 정책을 설정해야 :

// API 서버 설정 예시
Access-Control-Allow-Origin: https://shopping.com  // 이 출처에서의 요청 허용

CORS가 필요한 이유:
1. 보안: 악의적인 웹사이트가 다른 웹사이트의 데이터를 마음대로 가져가는 것을 방지
2. 데이터 보호: 허용된 웹사이트만 API를 사용할 수 있도록 제한

자주 마주치는 상황:

// 프론트엔드 (React, Vue 등)
fetch('https://api.example.com/data')  // 다른 도메인의 API 호출
  .then(response => response.json())
  .catch(error => console.error('CORS 에러!', error));

이때 CORS 에러가 발생하면:
1. 백엔드 개발자에게 해당 도메인을 허용해달라고 요청
2. 또는 프록시 서버를 사용하여 우회

간단한 해결 방법:
1. 개발 환경에서는 프록시 설정으로 해결
2. 실제 서비스에서는 서버 측에서 적절한 CORS 정책 설정

// Node.js Express 서버 예시
app.use(cors({
  origin: 'https://shopping.com',  // 허용할 출처
  credentials: true  // 쿠키 허용
}));

쉽게 정리하면:

• CORS는 웹브라우저의 보안 정책
• 다른 출처의 리소스를 사용하려면 해당 서버의 명시적 허용이 필요
• 주로 API 서버에서 허용할 출처를 설정하여 해결합니다