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

웹 개발을 하다 보면, 여러분의 웹사이트가 다른 도메인의 리소스를 필요로 할 때가 있습니다. 이때, CORS, 즉 Cross-Origin Resource Sharing에 대해 알아야 합니다. CORS는 웹 페이지가 다른 도메인에서 리소스를 안전하게 요청할 수 있도록 하는 메커니즘입니다. 이해하기 쉽게 설명해보겠습니다!

CORS란 무엇인가요?

간단히 말해서, CORS는 한 웹사이트가 다른 도메인의 리소스에 접근할 수 있도록 허용하는 방법입니다. 기본적으로, 웹 브라우저는 보안상의 이유로 같은 출처 정책(Same-Origin Policy)을 따릅니다. 이 정책은 웹 페이지가 다른 도메인의 리소스를 요청할 때 제한을 두는데, CORS는 이러한 제한을 넘어서게 해줍니다.

CORS는 어떻게 작동하나요?

웹 애플리케이션에서 다른 도메인의 리소스를 요청할 때, 브라우저는 자동으로 요청에 'Origin' 헤더를 추가합니다. 이 헤더는 요청이 시작된 출처를 나타냅니다. 서버는 이 요청을 받고, 'Access-Control-Allow-Origin' 헤더를 응답에 추가하여, 해당 출처의 요청을 허용할지 결정합니다.

예를 들어, 여러분의 웹사이트가 https://mywebsite.com에서 실행되고 있고, https://api.example.com에서 데이터를 가져오려고 한다면, 요청은 다음과 같이 보일 것입니다:

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Fetch error:", error));

만약 api.example.com 서버가 mywebsite.com에서의 요청을 허용하도록 설정되어 있다면, 요청은 성공적으로 처리됩니다. 그렇지 않으면 브라우저는 오류를 발생시킵니다.

CORS를 설정하는 방법

서버 측에서 CORS를 설정하는 것은 간단합니다. 여러분이 Node.js와 Express를 사용한다고 가정해 보겠습니다. 다음 코드 스니펫은 모든 출처에서의 요청을 허용하는 방법을 보여줍니다:

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

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

app.get('/data', (req, res) => {
  res.json({ message: 'This is CORS-enabled for all origins!' });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

이 코드는 서버가 모든 출처의 요청을 허용하도록 설정합니다. 하지만 보안상의 이유로, 특정 출처만 허용하도록 설정하는 것이 좋습니다. 이를 위해서는 * 대신 특정 도메인을 명시하면 됩니다.

결론

CORS는 웹 개발에서 중요한 개념입니다. 다른 도메인의 리소스를 안전하게 요청할 수 있도록 해주며, 웹 애플리케이션의 기능을 확장하는 데 필수적입니다. 이 가이드가 CORS의 기본을 이해하는 데 도움이 되었기를 바랍니다. Happy coding! 🚀