CORS(Cross-Origin Resource Sharing): 개념과 필요한 이유 완벽 정리

 

웹 개발을 하다 보면 "CORS 오류"라는 익숙한 메시지를 접하게 됩니다. 특히 클라이언트와 서버 간 통신에서 자주 발생하는 이 문제는 무엇일까요? 이번 포스팅에서는 CORS(Cross-Origin Resource Sharing)의 개념, 필요성, 그리고 이를 해결하는 방법에 대해 상세히 설명하겠습니다.

---

1. CORS란 무엇인가?

CORS(Cross-Origin Resource Sharing)는 한 도메인에서 실행 중인 웹 애플리케이션이 다른 도메인의 리소스에 접근할 수 있도록 권한을 부여하는 보안 메커니즘입니다. HTTP 헤더를 사용하여 브라우저가 특정 리소스를 요청할 때 서버에서 허용 여부를 결정합니다.

• Cross-Origin: 서로 다른 출처(도메인, 프로토콜, 포트)를 의미합니다.
• Resource Sharing: 리소스 공유를 의미합니다.

동일 출처 정책(Same-Origin Policy)

기본적으로 브라우저는 보안을 위해 동일 출처에서만 리소스를 요청할 수 있습니다. 동일 출처란 도메인, 프로토콜, 포트 번호가 모두 동일한 경우를 말합니다. 이를 위반하는 요청은 CORS 정책에 의해 차단됩니다.

예를 들어:

• 출처 1: https://example.com
• 출처 2: http://example.com (프로토콜이 다름)
• 출처 3: https://api.example.com (서브도메인이 다름)

위 2, 3의 요청은 모두 CORS 규칙을 위반합니다.

---

2. CORS가 필요한 이유

1) 보안 강화

CORS는 악의적인 웹사이트가 사용자의 정보를 탈취하거나, 원치 않는 요청을 보내는 것을 방지합니다. 동일 출처 정책은 이 보안 모델의 핵심입니다.

2) 정상적인 리소스 공유 허용

API 서버는 종종 다른 도메인에서 접근하도록 설계됩니다. CORS는 이러한 요청을 허용하기 위해 사용됩니다. 예를 들어, 프론트엔드와 백엔드가 서로 다른 도메인에서 호스팅될 때 CORS 설정이 필요합니다.

---

3. CORS의 작동 원리

CORS는 서버가 HTTP 응답 헤더를 통해 요청을 허용할지 여부를 브라우저에 알리는 방식으로 동작합니다. 요청 유형에 따라 다음 두 가지로 나뉩니다:

1) 단순 요청(Simple Request)

• GET, POST, HEAD 메서드로 전송
• Content-Type이 application/x-www-form-urlencoded, multipart/form-data, 또는 text/plain인 경우
• 요청이 간단하기 때문에 서버는 바로 응답합니다.

2) 예비 요청(Preflight Request)

• OPTIONS 메서드로 서버에 사전 요청을 보내어 요청 허용 여부를 확인합니다.
• CORS 헤더로 서버가 허용하는 메서드, 헤더, 출처를 명시합니다.

OPTIONS /api/resource HTTP/1.1
Host: api.example.com
Origin: https://example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type

---

4. CORS 헤더의 종류

1) 서버에서 설정하는 응답 헤더

• Access-Control-Allow-Origin
  • 허용된 출처를 명시합니다.
  • 예: Access-Control-Allow-Origin: https://example.com
• Access-Control-Allow-Methods
  • 허용된 HTTP 메서드를 명시합니다.
  • 예: Access-Control-Allow-Methods: GET, POST, OPTIONS
• Access-Control-Allow-Headers
  • 허용된 요청 헤더를 명시합니다.
  • 예: Access-Control-Allow-Headers: Content-Type, Authorization
• Access-Control-Allow-Credentials
  • 쿠키와 같은 자격 증명을 허용할지 여부를 명시합니다.
  • 예: Access-Control-Allow-Credentials: true

2) 클라이언트에서 설정하는 요청 헤더

• Origin
  • 요청이 발생한 출처를 명시합니다.
  • 예: Origin: https://example.com

---

5. CORS 오류 해결 방법

1) 서버에서 CORS 설정 추가

// Express 서버 예제
const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors({
  origin: 'https://example.com',
  methods: ['GET', 'POST'],
  credentials: true,
}));

app.listen(3000);

2) 프록시 서버 사용

프론트엔드와 백엔드 사이에 프록시 서버를 설정하여 동일 출처 정책을 우회할 수 있습니다.

• Webpack Dev Server의 proxy 설정

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
      },
    },
  },
};

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

개발 중에만 CORS를 우회하는 브라우저 확장을 사용할 수 있습니다. 하지만 이는 보안 문제가 있으므로 배포 환경에서는 사용하지 않습니다.

---

6. CORS와 JSONP의 차이점

과거에는 CORS를 지원하지 않는 환경에서 JSONP(JSON with Padding)를 사용하여 크로스 도메인 요청을 처리했습니다. 하지만 JSONP는 보안 문제가 있어 현재는 거의 사용되지 않습니다.

---

7. 결론

CORS는 현대 웹 애플리케이션의 보안과 유연성을 모두 보장하는 중요한 메커니즘입니다. 브라우저의 동일 출처 정책을 이해하고, CORS 설정을 적절히 구성함으로써 안정적이고 보안이 강화된 애플리케이션을 구축할 수 있습니다.