CORS(Cross-Origin Resource Sharing) 란?

CORS는 보안상의 이유로 브라우저가 서로 다른 출처(origin) 간의 요청을 제한하는 방식입니다. 이 글에서는 CORS의 개념, 동작 원리, 그리고 이를 해결하는 방법들에 대해 상세히 알아보겠습니다.

---

1. CORS란 무엇인가?

CORS는 웹 브라우저의 보안 정책인 **동일 출처 정책(Same-Origin Policy)**에서 기인한 문제를 해결하기 위해 도입된 메커니즘입니다. 동일 출처 정책은 브라우저가 다른 출처에서 로드된 리소스에 대해 요청을 제한하는 보안 조치입니다. 여기서 "출처"란 프로토콜, 도메인, 포트를 포함한 URL의 조합을 의미합니다.

예를 들어, 다음 두 URL은 서로 다른 출처로 간주됩니다:

• https://example.com
• http://example.com (프로토콜이 다름)
• https://api.example.com (서브도메인이 다름)
• https://example.com:8080 (포트가 다름)

CORS는 이러한 제한을 완화하여 서로 다른 출처 간의 안전한 리소스 공유를 가능하게 합니다.

---

2. CORS 동작 원리

CORS의 동작은 HTTP 요청/응답의 헤더를 통해 이루어집니다. 브라우저는 서버에 요청을 보낼 때 CORS 관련 헤더를 포함하며, 서버는 이를 기반으로 요청을 허용할지 여부를 결정합니다.

2.1 단순 요청(Simple Request)

다음 조건을 만족하면 요청은 "단순 요청"으로 간주됩니다:

• 요청 메서드가 GET, POST, 또는 HEAD 중 하나일 것.
• 요청 헤더가 Accept, Accept-Language, Content-Language, Content-Type 중 하나로 제한될 것.
• Content-Type이 text/plain, application/x-www-form-urlencoded, 또는 multipart/form-data 중 하나일 것.

단순 요청의 경우 브라우저는 요청을 보내며, 서버는 응답 헤더에 Access-Control-Allow-Origin을 포함해 허용 여부를 알립니다.

2.2 사전 요청(Preflight Request)

단순 요청 조건을 만족하지 않는 요청은 사전 요청 과정을 거칩니다. 브라우저는 먼저 서버에 OPTIONS 메서드를 사용해 요청을 보냅니다. 이 요청에는 다음과 같은 헤더가 포함됩니다:

• Access-Control-Request-Method: 실제 요청에서 사용할 메서드.
• Access-Control-Request-Headers: 실제 요청에서 사용할 커스텀 헤더.

서버는 이에 대한 응답으로 허용 여부를 나타내는 헤더를 반환합니다:

• Access-Control-Allow-Methods: 허용된 HTTP 메서드.
• Access-Control-Allow-Headers: 허용된 요청 헤더.
• Access-Control-Allow-Origin: 허용된 출처.

브라우저는 서버의 응답을 확인한 뒤 실제 요청을 진행합니다.

---

3. CORS 관련 주요 헤더

CORS를 처리하는 데 사용되는 주요 헤더는 다음과 같습니다:

• Access-Control-Allow-Origin: 요청을 허용할 출처를 명시. 예: *, https://example.com
• Access-Control-Allow-Methods: 허용된 HTTP 메서드 목록. 예: GET, POST, PUT, DELETE
• Access-Control-Allow-Headers: 허용된 요청 헤더 목록. 예: Content-Type, Authorization
• Access-Control-Allow-Credentials: 인증 정보(쿠키 등)를 포함한 요청을 허용할지 여부. 예: true
• Access-Control-Expose-Headers: 브라우저가 접근 가능한 응답 헤더 목록.

---

4. CORS 에러의 원인과 해결 방법

CORS 에러는 브라우저가 서버로부터 적절한 CORS 헤더를 받지 못했을 때 발생합니다. 주요 원인과 해결 방법은 다음과 같습니다:

4.1 서버 설정 미비

• 원인: 서버가 Access-Control-Allow-Origin 헤더를 반환하지 않음.
• 해결 방법: 서버에서 CORS 헤더를 추가로 설정. 예를 들어, Node.js/Express에서는 다음과 같이 설정할 수 있습니다:

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

4.2 인증 정보 관련 문제

• 원인: 클라이언트 요청에 withCredentials 옵션이 설정되었으나 서버가 이를 허용하지 않음.
• 해결 방법: 서버에서 Access-Control-Allow-Credentials: true 헤더를 추가하고, Access-Control-Allow-Origin에 와일드카드(*) 대신 특정 출처를 명시.

4.3 사전 요청 실패

• 원인: 서버가 OPTIONS 요청을 처리하지 않음.
• 해결 방법: 서버에서 OPTIONS 메서드를 지원하도록 설정.

---

5. CORS 설정 시 주의사항

• 보안: Access-Control-Allow-Origin에 *를 사용하는 것은 편리하지만, 보안상 위험할 수 있습니다. 중요 데이터를 다루는 경우 특정 출처만 허용해야 합니다.
• 사전 요청 최적화: 사전 요청이 빈번하게 발생하는 경우, 서버에서 캐싱을 통해 성능을 최적화할 수 있습니다. Access-Control-Max-Age 헤더를 사용해 캐싱 시간을 설정합니다.