웹 애플리케이션을 개발하다 보면, 다른 도메인에서 제공되는 데이터에 접근해야 할 필요가 생길 수 있습니다.
이때 필요한 것이 Cross-Origin Resource Sharing (CORS)입니다. CORS는 웹 브라우저에서 동일 출처 정책(Same-Origin Policy)을 우회하여, 다른 도메인에서 리소스를 요청할 수 있는 기능을 제공합니다.
CORS 동작 원리
CORS는 서버와 클라이언트 간의 통신에서 추가적인 HTTP 헤더를 사용하여 동작합니다.
- 클라이언트에서 다른 도메인의 리소스를 요청합니다.
- 서버에서는 요청을 받고, 응답에 CORS 관련 헤더를 추가합니다.
- 클라이언트에서는 서버의 응답을 확인하고, 이에 따라 동작을 결정합니다.
CORS 설정
서버 측에서 CORS를 설정하는 방법은 다양하지만, 아래는 일반적인 CORS 설정 예제입니다.
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('/api/news', (req, res) => {
// 뉴스 데이터를 가져오는 로직
res.json({ news: 'Hello World' });
});
app.listen(3000, () => {
console.log('서버가 3000번 포트에서 실행됨');
});
위 예제에서는 Express.js 프레임워크를 사용하고 있습니다. 서버의 res.header()
메서드를 사용하여 CORS 관련 헤더를 추가하고, 특정 경로(/api/news
)에서 클라이언트로 뉴스 데이터를 응답합니다.
CORS 요청 예제
CORS를 허용하는 서버에서 데이터를 가져오는 클라이언트 코드는 다음과 같습니다.
fetch('https://example.com/api/news')
.then(response => response.json())
.then(data => {
console.log(data.news);
})
.catch(error => {
console.error(error);
});
위 예제에서는 fetch API를 사용하여 다른 도메인(https://example.com
)의 /api/news
경로로 GET 요청을 보냅니다. 서버에서는 위에서 설정한 CORS 헤더에 따라 요청을 처리하고, 클라이언트에 뉴스 데이터를 응답합니다.
CORS를 통해 다른 도메인의 뉴스 피드를 가져올 수 있기 때문에, 웹 애플리케이션에서 다양한 데이터를 활용하여 사용자에게 보다 풍부한 경험을 제공할 수 있습니다.
결론
CORS를 사용하여 다른 도메인에서 리소스를 가져올 수 있게 되면, 웹 애플리케이션의 기능과 퍼포먼스를 향상시킬 수 있습니다. 그러나 보안상의 이유로 모든 도메인에 대해 권한을 허용하는 것은 좋지 않으므로, 필요한 도메인에 대해서만 CORS를 설정하는 것이 중요합니다.
#CORS #JavaScript