현대 웹 애플리케이션은 여러 서버와 API가 상호작용하며 정보를 주고받는 형태로 설계되고 있습니다.
이 과정에서 CORS(Cross-Origin Resource Sharing)라는 개념이 굉장히 중요하게 작용합니다.
CORS는 외부 도메인에서 자원을 요청할 때 브라우저가 이를 허용할지 결정하는 메커니즘입니다.
이 글에서는 Express.js에서 CORS를 설정하는 방법을 단계별로 자세하게 알아보겠습니다.
1. CORS의 이해
CORS란 하나의 사이트에서 다른 사이트의 자원에 접근하는 것을 허용하는 보안 기능입니다.
웹 브라우저는 기본적으로 자바스크립트에서 다른 도메인으로의 요청을 차단합니다.
예를 들어, ‘https://example.com’에서 호스팅되는 웹 애플리케이션이 ‘https://api.example.com’로 API 요청을 하려고 하면,
브라우저는 이를 차단하고 CORS 오류를 발생시킵니다.
이는 웹 보안을 강화하기 위한 기능입니다.
2. Express.js에서 CORS를 설정하는 이유
Express.js는 서버와 API를 쉽게 구축할 수 있는 강력한 웹 프레임워크입니다.
하지만 외부 도메인에서의 요청을 허용하려면 CORS 설정이 필요합니다.
이를 통해 여러분의 API가 신뢰할 수 있는 도메인에서만 요청을 받을 수 있도록 제어할 수 있습니다.
CORS를 적절히 설정하지 않으면 보안 위협에 노출될 수 있습니다.
3. CORS 설정 방법
Express.js에서 CORS를 설정하는 방법은 여러 가지가 있지만, 가장 일반적으로 사용하는 방법은 cors 패키지를 활용하는 것입니다.
이 패키지는 CORS 관련 로직을 간단하게 처리할 수 있도록 도와줍니다. 이제 설치 및 설정 방법을 살펴보겠습니다.
3.1. CORS 패키지 설치하기
npm install cors
먼저, CORS 패키지를 프로젝트에 설치해야 합니다.
위의 명령어를 사용하여 CORS 패키지를 설치합니다.
3.2. 기본 CORS 설정
설치가 완료되면 Express 애플리케이션에서 사용할 수 있도록 설정합니다.
기본적인 설정은 다음과 같습니다.
javascript
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors()); // CORS 설정 추가
app.get('/api/data', (req, res) => {
res.json({ message: 'CORS가 설정된 데이터입니다.' });
});
app.listen(3000, () => {
console.log('서버가 http://localhost:3000 에서 실행 중입니다.');
});
위 코드에서 app.use(cors()); 구문이 CORS를 활성화시킵니다.
이제 이 서버는 모든 도메인에서의 요청을 수락하게 됩니다.
3.3. CORS 옵션 설정하기
모든 도메인에서 요청을 수락하는 것은 보안상 위험할 수 있습니다.
특정 도메인만 허용하고 싶다면 CORS 옵션을 설정해야 합니다.
아래 예제에서 특정 도메인에 대해 요청을 허용하는 방법을 보여드립니다.
javascript
const express = require('express');
const cors = require('cors');
const app = express();
const allowedOrigins = ['http://example.com', 'http://another-domain.com'];
app.use(cors({
origin: allowedOrigins, // 허용된 도메인
methods: ['GET', 'POST'], // 허용된 HTTP 메소드
allowedHeaders: ['Content-Type', 'Authorization'], // 허용된 헤더
}));
app.get('/api/data', (req, res) => {
res.json({ message: '특정 도메인에서 요청한 데이터입니다.' });
});
app.listen(3000, () => {
console.log('서버가 http://localhost:3000 에서 실행 중입니다.');
});
위 코드는 allowedOrigins 배열에 지정된 도메인만 요청할 수 있도록 설정합니다.
methods와 allowedHeaders 옵션으로 HTTP 메소드와 허용된 헤더도 추가적으로 지정할 수 있습니다.
3.4. 특수한 CORS 설정
가끔은 특정 요구 사항에 따라 CORS 정책을 세밀하게 설정해야 할 때가 있습니다.
예를 들어 인증된 요청에서 ‘Credential’을 허용하려면 아래와 같이 설정할 수 있습니다.
javascript
const express = require('express');
const cors = require('cors');
const app = express();
const allowedOrigins = ['http://example.com'];
app.use(cors({
origin: allowedOrigins,
credentials: true, // 인증된 요청 허용
}));
app.get('/api/data', (req, res) => {
res.json({ message: '인증이 허용된 데이터입니다.' });
});
app.listen(3000, () => {
console.log('서버가 http://localhost:3000 에서 실행 중입니다.');
});
위 예시에서 credentials: true 옵션을 추가함으로써, 인증된 요청이 허용됩니다.
클라이언트에서 인증 정보(예: 쿠키)를 포함하여 요청이 가능한 상태가 됩니다.
3.5. CORS 오류 처리하기
종종 클라이언트에서 CORS 오류가 발생할 수 있는데, 이는 브라우저가 요청을 차단하기 때문입니다.
서버가 올바르게 CORS를 설정했더라도 몇 가지 이유로 인해 오류가 발생할 수 있습니다.
오류를 해결하려면 다음과 같은 점을 먼저 확인해야 합니다.
- 서버와 클라이언트의 도메인이 올바르게 설정되어 있는지 확인합니다.
- HTTP 메소드와 헤더가 허용된 값인지 확인합니다.
- If the server is configured correctly and still causes problems, check browser extensions or security settings that might block requests.
4. CORS를 사용한 실제 예제
이제 실제 애플리케이션에서 CORS를 사용하는 예제를 살펴보겠습니다.
아래 예제에서는 간단한 클라이언트와 Express.js 서버를 설정하여 CORS를 사용하는 방법을 보여줍니다.
4.1. Express.js 서버 설정
javascript
const express = require('express');
const cors = require('cors');
const app = express();
const allowedOrigins = ['http://example-client.com'];
app.use(cors({
origin: allowedOrigins,
methods: ['GET', 'POST'],
credentials: true,
}));
app.get('/api/message', (req, res) => {
res.json({ message: '안녕하세요, 클라이언트입니다!' });
});
app.listen(3000, () => {
console.log('서버가 http://localhost:3000 에서 실행 중입니다.');
});
4.2. 클라이언트 코드
Express 서버에 요청하는 클라이언트 코드는 다음과 같이 작성할 수 있습니다.
javascript
fetch('http://localhost:3000/api/message', {
method: 'GET',
credentials: 'include', // 인증 정보 포함
})
.then(response => response.json())
.then(data => {
console.log(data.message); // 안녕하세요, 클라이언트입니다!
})
.catch(error => {
console.error('오류 발생:', error);
});
5. 결론
이번 글에서는 Express.js에서 CORS를 설정하는 방법에 대해 자세히 알아보았습니다.
CORS 설정은 보안의 일환으로 매우 중요한 과정입니다.
올바르게 설정하면, 외부 도메인에서 API를 안전하게 활용할 수 있습니다.
Express.js에서 CORS를 설정하는 것은 간단하지만,
보안상의 위험을 피하기 위해서는 적절한 정책을 계속 유지하고 관리해야 합니다.
더 많은 팁과 방법을 알고 싶다면, 공식 Express.js 문서와 CORS에 대한 리소스를 참고하시길 바랍니다.
앞으로 여러분의 웹 애플리케이션에서 CORS를 적절히 활용하여 안전하고 신뢰할 수 있는 서비스를 제공하시길 바랍니다!