Express에서 CORS 미들웨어로 교차 도메인 이슈 해결하는 방법

웹 개발을 하다 보면 다른 도메인 간의 리소스를 공유할 필요가 있을 때가 있습니다. 이런 상황에서 브라우저의 보안 정책 때문에 교차 도메인 요청이 제한되는 CORS(Cross-Origin Resource Sharing) 문제에 직면할 수 있습니다. 이 글에서는 Express 애플리케이션에서 CORS 미들웨어를 사용하여 이러한 문제를 해결하는 방법에 대해 알아봅니다.

CORS 미들웨어 설치

먼저, npm을 사용하여 cors 미들웨어를 설치합니다.

npm install cors

Express 애플리케이션에 CORS 미들웨어 적용하기

cors 미들웨어를 설치한 후, Express 애플리케이션에 적용해야 합니다. 예를 들어 app.js 파일에 다음과 같은 코드를 추가합니다.

// Express 모듈을 불러옵니다.
const express = require('express');
// CORS 미들웨어 모듈을 불러옵니다.
const cors = require('cors');
// Express 애플리케이션 객체를 생성합니다.
const app = express();

// CORS 미들웨어를 사용하여 모든 출처의 요청을 허용합니다.
app.use(cors());

// '/api/data' 경로로 GET 요청이 오면 JSON 형태의 응답을 보냅니다.
app.get('/api/data', (req, res) => {
  res.json({msg: '이 데이터는 CORS 정책을 충족합니다.'});
});

// 3000번 포트에서 서버를 시작하고, 서버가 실행되면 콘솔에 메시지를 출력합니다.
app.listen(3000, () => {
  console.log('Server running on port 3000');
});

위 코드는 모든 출처에서 오는 요청을 허용합니다. 특정 출처만 허용하려면 cors() 함수에 옵션 객체를 전달할 수 있습니다.

특정 출처만 허용하기

// CORS 미들웨어 설정을 사용자 지정합니다.
// 여기서는 'http://example.com'에서 오는 요청만 허용하도록 설정합니다.
app.use(cors({
  origin: 'http://example.com'
}));

위 코드는 CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유) 정책에 따라, 특정 출처(http://example.com)에서 오는 요청에 대해서만 서버의 리소스에 접근을 허용하도록 설정합니다. 이렇게 설정함으로써, 보안을 강화하고, 서버가 응답할 수 있는 요청의 출처를 제한할 수 있습니다. cors 미들웨어는 이러한 출처 제한 외에도, 다양한 옵션(예: 허용하는 HTTP 메소드, 헤더 등)을 설정할 수 있어, 더 세밀한 CORS 정책의 구현을 가능하게 합니다.

참고 사이트

이 글을 통해 Express 애플리케이션에서 CORS 문제를 해결하는 기본적인 방법에 대해 알아보았습니다. CORS는 웹 개발의 중요한 부분이며, 다양한 옵션과 설정을 통해 보다 세밀하게 제어할 수 있습니다. 자세한 정보는 참고 사이트를 확인하세요.

Express에서 CORS 미들웨어로 교차 도메인 이슈 해결하는 방법

CORS 미들웨어 설치

Express 애플리케이션에 CORS 미들웨어 적용하기

특정 출처만 허용하기

참고 사이트

관련 이전 게시글

동일 카테고리 게시글