[Web] CORS에 대해 알아보자

브라우저가 특정 보안 정책을 따르기 때문에 웹 페이지가 자신과 다른 출처에서 자원을 요청하려고 할 때 이를 허용하거나 차단할 수 있는 설정이 필요하다. CORS는 이런 상황에서 중요한 역할을 한다.

 

1. CORS (Cross-Origin Resource Sharing)

• 정의
  • 웹 개발에서 다른 도메인(출처)간의 자원 공유를 제어하기 위한 보안 메커니즘, 마치 경비실에서 출입증 검사를 받는 것과 유사하다.
  • 동일 출처 정책의 제한을 풀기 위해 서버 측에서 제공하는 옵션
    • 동일 출처 정책(Same-Origin Policy) : 브라우저가 기본적으로 보안상의 이유로 브라우저는 기본적으로 다른 출처(도메인, 프로토콜, 포트 번호가 다름)에서 리소스를 요청을 차단하는 정책
      • 브라우저에 내장된 기본적인 보안 체계로 동작해 이를 바꿀 수는 없으나 서버가 적절한 CORS 헤더를 설정하면 동일 출처가 아닌 자원도 접근할 수 있다. 
      • ex. https://example.com에서 실행 중인 JavaScript는 기본적으로 https://api.example.com에 요청을 보낼 수 없음
• 역할
  • 요청을 허용하거나 차단하도록 서버가 브라우저에게 지시할 수 있는 규칙을 설정, 즉 서버에서 "이 출처에서 요청해도 괜찮아!"라는 신호를 브라우저에 보낸다.
  • 쉽게 말해 출입증(Same-Origin Policy)이 없으면 다른 건물(출처)에 접근할 수 없지만 관리자가 특정 회사(출처)의 사람들만 허용하도록 설정(CORS 정책)을 하면 출입이 가능하다. 이처럼 CORS는 웹 브라우저에서 출입증을 확인하고 요청을 허용하거나 차단한다.

 

2. 작동 원리

1. 브라우저가 요청을 보냄
   • ex. https://example.com에서 https://api.otherdomain.com에 데이터를 요청한다고 가정한다.
2. 브라우저가 Preflight 요청을 보냄 (필요한 경우)
   • 일부 요청(PUT, DELETE, 사용자 정의 헤더 포함 요청 등)은 본 요청을 보내기 전에 OPTIONS 메서드로 서버에 "내가 이런 요청을 보내도 될까요?"라고 묻는다.
3. 서버의 응답
   • 서버는 응답 헤더에 CORS 관련 정보를 포함하여 브라우저에 전달한다.
     
     • Access-Control-Allow-Origin: 어떤 출처에서 요청을 허용할지 지정
     • Access-Control-Allow-Methods: 허용할 HTTP 메서드(GET, POST, DELETE 등)
     • Access-Control-Allow-Headers: 클라이언트가 사용할 수 있는 사용자 정의 헤더
   • 동일 출처 정책이 기본적으로 차단하는 자원 요청을 허용하기 위해 브라우저와 서버 간 협상을 진행한다.
   • 서버가 요청을 허가하는 경우, 브라우저는 차단하지 않고 요청을 처리한다.
4. 브라우저가 응답을 확인
   • 서버의 응답이 CORS 규칙에 맞으면 요청이 진행되고, 맞지 않으면 차단된다.

 

3. 주요 CORS 헤더

• Access-Control-Allow-Origin : 허용할 출처를 지정
  
  • 모든 출처를 허용하려면 * 사용하지만 민감한 데이터를 다룰 때는 권장되지 않는다.
  • ex. Access-Control-Allow-Origin: https://example.com
• Access-Control-Allow-Methods : 허용할 HTTP 메서드를 지정
  • ex. Access-Control-Allow-Methods: GET, POST, PUT
• Access-Control-Allow-Headers : 클라이언트가 요청 시 사용할 수 있는 추가 헤더를 명시
  • ex. Access-Control-Allow-Headers: Content-Type, Authorization
• Access-Control-Allow-Credentials : 쿠키와 같은 자격 증명을 포함한 요청을 허용할지 여부를 설정
  • ex. Access-Control-Allow-Credentials: true

 

4. 예시

• 서버 설정 예제 (Node.js + Express)

const express = require('express');
const cors = require('cors');
const app = express();

// CORS 기본 설정
app.use(cors({
  origin: 'https://example.com',  // 허용할 출처
  methods: ['GET', 'POST'],       // 허용할 메서드
  credentials: true               // 쿠키를 포함한 요청 허용
}));

app.get('/data', (req, res) => {
  res.json({ message: 'CORS 성공!' });
});

app.listen(3000, () => console.log('서버 실행 중...'));

 

5. 추가로

• Preflight 요청이란?
  • 브라우저가 본 요청 전에 보내는 OPTIONS 요청으로, 서버에 CORS 정책을 확인합니다.
  • Preflight 요청이 발생하지 않는 경우:
    • GET, POST, HEAD 메서드만 사용
    • 사용자 정의 헤더가 없음
• CORS 오류 해결 방법
  • 서버에서 올바른 CORS 헤더를 설정
  • 프록시 서버를 사용해 클라이언트와 다른 출처 간의 요청을 중계