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

웹 개발의 세계에서, 여러분이 만든 웹사이트가 다른 웹사이트의 자원을 사용하려 할 때, 보안 문제로 인해 이를 막는 경우가 많습니다. 이때 등장하는 것이 바로 CORS, 즉 Cross-Origin Resource Sharing입니다. 이 가이드에서는 CORS가 무엇인지, 그리고 왜 중요한지에 대해 쉽게 설명해 드리겠습니다.

CORS란 무엇인가요?

CORS는 웹 페이지가 다른 도메인의 자원을 안전하게 요청할 수 있도록 하는 메커니즘입니다. 기본적으로 브라우저는 같은 출처 정책(Same-Origin Policy)을 따르기 때문에, 웹 페이지는 같은 도메인의 자원만 사용할 수 있습니다. 하지만 CORS를 사용하면, 서버는 특정 웹 페이지가 다른 출처의 자원을 요청할 수 있도록 허용할 수 있습니다.

왜 CORS가 중요한가요?

웹 개발이 점점 복잡해지고, 다양한 웹 서비스들이 상호작용하는 현대에서는, 여러분의 웹 애플리케이션이 다른 서비스의 API를 사용하는 경우가 많습니다. 예를 들어, 여러분의 웹사이트에서 날씨 정보를 보여주기 위해 다른 도메인의 날씨 API를 호출할 수 있습니다. 이때 CORS 없이는 보안 문제로 인해 요청이 차단됩니다.

CORS 작동 방식

CORS는 HTTP 헤더를 사용하여 작동합니다. 웹 애플리케이션이 다른 출처의 자원을 요청할 때, 브라우저는 자동으로 Origin 헤더를 요청에 추가합니다. 서버는 이 요청을 받고, Access-Control-Allow-Origin 헤더를 응답에 추가하여, 해당 출처의 요청을 허용할지 결정합니다.

예를 들어, 여러분의 웹 애플리케이션이 https://example.com에서 실행되고 있고, https://api.weather.com에서 날씨 정보를 요청한다고 가정해 봅시다. 이 경우, 날씨 API 서버는 다음과 같은 응답 헤더를 포함할 수 있습니다:

Access-Control-Allow-Origin: https://example.com

이 헤더는 https://example.com에서의 요청만 허용한다는 것을 의미합니다.

간단한 CORS 예제

웹 개발에서 CORS를 구현하는 것은 간단합니다. 여기 간단한 예제를 보여드리겠습니다:

// 클라이언트 사이드 예제
fetch("https://api.weather.com/data", {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error("Error fetching data:", error));

이 코드는 https://api.weather.com/data에서 데이터를 요청합니다. 만약 api.weather.com 서버가 CORS를 올바르게 설정했다면, 요청은 성공할 것입니다.

결론

CORS는 웹 개발에서 매우 중요한 개념입니다. 다른 도메인의 자원을 안전하게 사용할 수 있도록 해주며, 현대 웹 애플리케이션의 상호작용성을 크게 향상시킵니다. 이 가이드가 CORS의 기본을 이해하는 데 도움이 되었기를 바랍니다. Happy coding!