웹 브라우저에서 다른 도메인의 리소스에 접근할 때 발생하는 보안 메커니즘입니다. 간단히 말해, 한 웹 페이지에서 다른 도메인의 서버로 요청을 보낼 때, 이 요청을 허용할지 결정하는 역할을 합니다. 웹 애플리케이션의 보안을 위해 도메인 간의 요청을 제한함으로써 민감한 데이터를 보호하는 데 중요한 역할을 합니다.
웹 브라우저는 보안을 위해 **SOP(Same-Origin Policy, 동일 출처 정책)**이라는 규칙을 따릅니다. SOP는 자바스크립트 코드가 웹 페이지의 데이터와 상호작용할 때 해당 코드가 현재 페이지와 같은 도메인, 프로토콜, 포트를 가지고 있어야 한다는 정책입니다. 이 규칙은 해커가 자바스크립트를 통해 사용자의 중요한 정보에 접근하는 것을 방지하는 데 도움이 됩니다.
그러나 많은 웹 애플리케이션에서는 다양한 도메인의 서버에서 데이터를 가져와야 하는 경우가 많습니다. 예를 들어, 도메인 A에서 동작하는 프론트엔드가 도메인 B에 있는 API 서버로부터 데이터를 요청하고 싶어할 때가 있습니다. 이때 SOP에 의해 기본적으로 이런 요청이 차단되는데, 이 문제를 해결하기 위해 도입된 것이 CORS입니다.
Node.js에서 CORS(Cross-Origin Resource Sharing) 문제를 해결하려면, 서버 측에서 클라이언트가 다른 도메인에서 API에 접근할 수 있도록 허용해 주어야 합니다.
cors 모듈은 Node.js의 Express와 같은 서버에서 쉽게 CORS를 설정할 수 있게 해 줍니다.
const express = require('express');
const cors = require('cors');
const app = express();
// 모든 도메인에서 접근 허용
app.use(cors());
// 특정 옵션으로 CORS 설정
app.use(cors({
origin: '<http://localhost:3000>', // 허용할 도메인
methods: 'GET,POST', // 허용할 HTTP 메소드
credentials: true // 쿠키를 포함한 인증 정보 허용 여부
}));
app.get('/api', (req, res) => {
res.json({ message: 'Hello World' });
});
app.listen(8080, () => {
console.log('Server is running on port 8080');
});
app.use(cors())를 통해 모든 도메인에서의 접근을 허용하고 있으며, 옵션을 사용해 특정 도메인과 메소드만 허용하도록 세부 설정도 가능합니다.
만약 모든 출처를 허용하려면 origin 옵션을 * 로 설정하면됩니다.
위 사항을 적용하고 클라이언트 사이드에서 응답 헤더를 보면, 기존에는 안 적혀있었던 Access-Control-Allow-Origin이 설정 되어있는 것을 볼 수 있습니다.
CORS 문제는 응답 헤더를 설정하여 해결할 수도 있습니다. Access-Control-Allow-Origin 헤더를 응답에 포함시키면 됩니다.