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

웹 개발을 하다 보면 다양한 웹사이트 간에 데이터를 주고받는 상황이 자주 발생합니다. 하지만 보안상의 이유로 모든 웹 요청이 자유롭게 허용되지는 않습니다. 이때 필요한 것이 바로 CORS, 즉 Cross-Origin Resource Sharing입니다. CORS는 웹 페이지가 다른 도메인의 리소스에 접근할 수 있도록 허용하는 메커니즘입니다. 이 가이드에서는 CORS의 기본 개념을 쉽게 설명하고, 간단한 코드 예제를 통해 이해를 돕고자 합니다.

CORS란 무엇인가요?

CORS는 웹 페이지가 다른 도메인(출처)의 리소스를 안전하게 요청할 수 있도록 하는 브라우저의 보안 기능입니다. 기본적으로, 웹 브라우저는 같은 출처 정책(Same-Origin Policy)을 따릅니다. 이 정책은 웹 애플리케이션이 다른 출처의 리소스를 가져오는 것을 제한합니다. 하지만 CORS를 사용하면 서버가 특정 출처에서 자신의 리소스에 접근할 수 있도록 허용할 수 있습니다.

왜 CORS가 필요한가요?

웹 개발을 하면서 다양한 API를 사용하거나, 다른 도메인의 이미지, 스크립트 등을 불러와야 할 때가 많습니다. 이런 상황에서 CORS 없이는 보안 문제로 인해 리소스를 자유롭게 사용할 수 없습니다. CORS는 이러한 제약을 안전하게 우회할 수 있는 방법을 제공합니다.

간단한 CORS 예제

웹 서버가 다른 출처의 웹 페이지로부터 자신의 리소스에 대한 접근을 허용하려면, 서버의 응답에 특정 HTTP 헤더를 포함해야 합니다. 예를 들어, 서버가 모든 출처에서 자신의 리소스에 접근할 수 있도록 허용하려면 다음과 같이 응답 헤더를 설정할 수 있습니다.

Access-Control-Allow-Origin: *

이 헤더는 서버가 모든 출처의 웹 페이지로부터의 요청을 허용한다는 것을 의미합니다. 하지만 보안상의 이유로, 특정 출처만 허용하고 싶을 때는 다음과 같이 설정할 수 있습니다.

Access-Control-Allow-Origin: https://example.com

이 경우, https://example.com에서만 서버의 리소스에 접근할 수 있습니다.

실습해보기

간단한 Node.js 서버를 만들어 CORS를 구현해보겠습니다. 다음은 express와 cors 라이브러리를 사용하여 모든 출처에서 서버의 리소스에 접근할 수 있도록 설정하는 예제입니다.

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

const app = express();

// 모든 출처에서의 접근을 허용
app.use(cors());

app.get('/data', (req, res) => {
  res.json({ message: 'CORS를 통해 접근 가능!' });
});

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

이 코드는 /data 경로로 들어오는 GET 요청에 대해 모든 출처에서의 접근을 허용합니다. 이렇게 간단하게 CORS 설정을 할 수 있습니다.

CORS는 웹 개발에서 매우 중요한 개념입니다. 다양한 리소스를 안전하게 사용하기 위해 CORS를 올바르게 이해하고 설정하는 것이 중요합니다. 이 가이드가 CORS의 기본을 이해하는 데 도움이 되었기를 바랍니다.