CORS 이해하기: 웹 개발자를 위한 완벽한 가이드 🌐

웹 개발을 하다 보면, 다른 출처(origin)에서 리소스를 불러와야 할 때가 있습니다. 이때, CORS(Cross-Origin Resource Sharing)라는 개념이 중요한 역할을 합니다. CORS는 웹 페이지가 다른 도메인의 리소스에 접근할 수 있도록 허용하는 메커니즘입니다. 이 글에서는 CORS의 기본 개념과 웹 개발자가 알아야 할 중요한 정보를 쉽게 설명하겠습니다.

CORS란 무엇인가요?

간단히 말해서, CORS는 한 웹 페이지가 다른 도메인의 리소스를 안전하게 요청할 수 있도록 하는 규칙입니다. 기본적으로, 웹 브라우저는 같은 출처 정책(Same-Origin Policy)을 따릅니다. 이 정책은 보안을 위해 설계되었으며, 한 출처에서 불러온 스크립트가 다른 출처의 리소스와 상호작용하지 못하도록 합니다. 하지만, CORS를 사용하면 이러한 제한을 안전하게 우회할 수 있습니다.

CORS는 어떻게 작동하나요?

웹 애플리케이션에서 다른 출처의 리소스를 요청할 때, 브라우저는 자동으로 해당 요청에 CORS 헤더를 추가합니다. 서버는 이 헤더를 확인하고, 요청이 허용되는 경우에만 리소스에 접근할 수 있는 권한을 부여합니다.

예를 들어, 당신의 웹 애플리케이션(http://example.com)이 다른 도메인(http://api.example.com)에서 데이터를 요청한다고 가정해 봅시다. 이 경우, 브라우저는 요청과 함께 Origin: http://example.com 헤더를 보냅니다. 서버는 이 요청을 검토하고, Access-Control-Allow-Origin: http://example.com 헤더를 응답에 포함시켜 요청을 허용할 수 있습니다.

간단한 CORS 요청 예제

웹 개발에서 CORS 요청을 다루는 기본적인 예제를 살펴보겠습니다. 아래는 JavaScript를 사용하여 다른 도메인의 API에서 데이터를 요청하는 코드 스니펫입니다.

fetch("http://api.example.com/data", {
  method: "GET", // HTTP 요청 메소드
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error("CORS 에러:", error));

이 코드는 fetch 함수를 사용하여 http://api.example.com/data에서 데이터를 요청합니다. 만약 서버가 CORS를 올바르게 처리하고 요청을 허용한다면, 응답 데이터를 콘솔에 출력할 수 있습니다.

CORS를 올바르게 설정하는 방법

서버에서 CORS를 올바르게 설정하는 것은 중요합니다. 다음은 서버에서 CORS 요청을 허용하는 방법의 예시입니다.

• Node.js (Express)

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

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*"); // 모든 도메인에서의 요청을 허용
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.get('/data', (req, res) => {
  res.json({ message: "CORS 정책으로부터 안전하게 데이터를 받았습니다." });
});

app.listen(3000, () => {
  console.log('서버가 3000번 포트에서 실행중입니다.');
});

이 예제에서는 Express 미들웨어를 사용하여 모든 도메인에서의 요청을 허용하도록 설정했습니다. 실제 환경에서는 Access-Control-Allow-Origin 헤더에 구체적인 도메인을 명시하여 보안을 강화하는 것이 좋습니다.

CORS는 웹 개발에서 중요한 보안 메커니즘입니다. 이 가이드를 통해 CORS의 기본을 이해하고, 웹 애플리케이션에서 안전하게 리소스를 공유하는 방법을 배웠기를 바랍니다.