Create Next App

January 16, 2025

답변 확인

CORS(Cross-Origin Resource Sharing)는 브라우저의 보안 정책인 Same-Origin Policy(SOP) 를 완화하여, 다른 도메인에서 리소스를 요청하고 사용할 수 있도록 허용하기 위한 정책입니다.

SOP & CORS

1. 동일 출처 정책(SOP)

기본적으로 SOP는 다른 출처에서의 리소스 요청을 차단함
크로스사이트 요청 위조 악성 웹사이트가 사용자의 요청을 도용하여, 의도치 않은 요청을 서버에 보내게 만드는 공격인 (CSRF) 공격의 위력을 낮추기 위해 존재
동일 출처: 프로토콜, 도메인, 포트가 동일해야 함
- 도메인(Hostname): example.com
- 출처(Origin): https://example.com

https://example.com -> https://example.com ✅ (허용)
https://example.com -> http://example.com ❌ (거부, 프로토콜 다름)
https://example.com -> https://api.example.com ❌ (거부, 서브도메인 다름)

2. 서로 다른 출처 접근 허용 정책(CORS)

SOP의 제한을 완화하기 위해 서버가 특정 출처에서의 요청을 허용할 수 있도록 설정하는 방법
서버에서 HTTP 헤더를 통해 클라이언트에게 요청을 허용할 출처를 명시

왜 필요한가?

1. 보안 강화

악의적인 스크립트로부터 데이터를 보호하기 위해 SOP가 기본적으로 적용되어 있는데 CORS는 안전하게 설정된 조건하에 다른 출처의 요청을 허용

2. 다른 출처의 API 사용

클라이언트와 서버가 서로 다른 출처에 있을 때, 데이터 통신이 필요하면 CORS가 허용되어야 함
예: https://frontend.com에서 https://api.backend.com에 요청.

3. 현대 웹 애플리케이션에서의 필요성

SPA(Single Page Application)와 같은 아키텍처에서 백엔드 서버와 클라이언트 서버가 서로 다른 도메인에 있을 수 있으므로, CORS 설정이 필수적

CORS 동작 방식

1. Preflight 요청:

브라우저는 OPTIONS 메서드를 사용해 서버에 사전 요청을 보내 CORS 정책을 확인

2. CORS 설정 헤더:

서버는 다음과 같은 헤더를 통해 클라이언트 요청을 허용

Access-Control-Allow-Origin: 허용할 출처를 명시(*로 모든 출처 허용 가능).
Access-Control-Allow-Methods: 허용할 HTTP 메서드(GET, POST 등).
Access-Control-Allow-Headers: 클라이언트가 요청에서 사용할 수 있는 추가 헤더를 명시.
Access-Control-Allow-Credentials: 인증 정보(쿠키 등) 포함 여부.

예제

서버에서 CORS 설정

Node.js와 Express를 사용한 예제:

const express = require('express');
const cors = require('cors');
 
const app = express();
 
// 모든 출처 허용
app.use(cors());
 
// 특정 출처만 허용
app.use(
  cors({
    origin: 'https://example.com', // 허용할 출처
    methods: ['GET', 'POST'], // 허용할 HTTP 메서드
    credentials: true, // 인증 정보 허용
  })
);
 
app.get('/', (req, res) => {
  res.send('CORS 설정 성공!');
});
 
app.listen(3000, () => console.log('Server running on port 3000'));

브라우저에서 CORS 요청

fetch('https://api.example.com/data', {
  method: 'GET',
  credentials: 'include', // 쿠키 포함
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error('CORS 에러:', error));

CORS에서 발생할 수 있는 주요 에러

No 'Access-Control-Allow-Origin' header:

서버에서 CORS 헤더가 설정되지 않아 클라이언트 요청이 차단됨.

Preflight response is invalid:

브라우저가 사전 요청(OPTIONS 메서드)에 대해 적절한 응답을 받지 못함.

Method not allowed:

요청한 HTTP 메서드가 서버의 Access-Control-Allow-Methods에 포함되지 않음.

결론

CORS는 SOP의 제한을 완화하여 현대 웹 애플리케이션에서 필요한 교차 출처 데이터 요청을 가능하게 함

서버에서 헤더를 설정해 필요한 요청만 허용하고, 보안을 유지하면서도 기능적 요구를 충족할 수 있음
프론트엔드와 백엔드가 다른 출처에 있는 경우, CORS는 반드시 필요한 설정
적절한 CORS 설정은 애플리케이션 보안과 사용자 경험을 모두 향상시킴

CORS (Cross-Origin Resource Sharing)