자바스크립트에서 CORS를 통해 다른 도메인의 리소스를 로드하는 방법에 대해 알아보세요.

12 Oct 2023

cors

CORS란 무엇인가?

CORS(Cross-Origin Resource Sharing)는 웹 애플리케이션에서 다른 도메인의 리소스를 요청하여 사용하기 위한 메커니즘입니다. 동일 출처 정책(Same-Origin Policy)에 따라 일반적으로 다른 출처에서 리소스를 요청할 수 없지만, CORS를 통해 이러한 제한을 우회할 수 있습니다.

CORS 구성 방법

CORS를 구성하려면 서버 측과 클라이언트 측에서 몇 가지 구성이 필요합니다.

서버 측 구성

서버 측에서는 응답 헤더에 CORS 관련 헤더를 포함시켜야 합니다. 가장 일반적인 헤더는 다음과 같습니다:

Access-Control-Allow-Origin: <도메인>

이 헤더는 요청을 허용하는 도메인을 지정합니다. 예를 들어, 모든 도메인의 요청을 허용하려면 “*“를 사용할 수 있습니다. 서버 측에서는 또한 다른 CORS 관련 헤더를 설정할 수도 있습니다.

클라이언트 측 구성

클라이언트 측에서는 XMLHTTPRequest나 Fetch API 등을 사용하여 요청을 보낼 때 withCredentials 속성을 true로 설정해야 합니다. 예를 들어, 다음과 같이 fetch를 사용하여 요청을 보낼 수 있습니다.

fetch('http://example.com/resource', {
  method: 'GET',
  mode: 'cors',
  credentials: 'include'
})
  .then(response => response.json())
  .then(data => {
    // 로드한 데이터를 처리하는 코드
  })
  .catch(error => {
    // 오류 처리 코드
  });

브라우저 지원 현황

CORS는 잘 지원되는 기능이지만, 모든 브라우저에서 일관된 방식으로 동작하지는 않을 수 있습니다. 일부 오래된 버전의 브라우저에서는 일부 기능이 제한적일 수 있으므로 이를 고려해야 합니다. CORS를 사용하기 전에 대상 브라우저의 지원 현황을 확인하는 것이 중요합니다.

CORS와 보안

CORS를 사용하여 다른 도메인의 리소스를 로드할 때 보안을 유지해야 합니다. 서버는 크로스 도메인 요청을 허용할 때 출처 검사 또는 API 키와 같은 인증 방식을 사용하여 요청을 제한할 수 있어야 합니다.

CORS를 사용하여 다른 도메인의 리소스 로드하기

CORS를 사용하여 다른 도메인의 리소스를 로드하는 방법은 간단합니다. 서버 측에서는 CORS 관련 헤더를 설정하고, 클라이언트 측에서는 요청을 보낼 때 mode: 'cors'를 설정하면 됩니다.

fetch('http://example.com/resource', {
  method: 'GET',
  mode: 'cors',
  credentials: 'include'
})
  .then(response => response.json())
  .then(data => {
    // 로드한 데이터를 처리하는 코드
  })
  .catch(error => {
    // 오류 처리 코드
  });

마무리

CORS를 사용하여 다른 도메인의 리소스를 로드하는 방법에 대해 알아보았습니다. 이를 통해 웹 애플리케이션에서 다른 도메인의 데이터를 활용할 수 있게 되었으며, 서버와 클라이언트 간의 구성을 올바르게 설정해야 문제 없이 동작할 수 있습니다. CORS는 웹 개발에서 반드시 이해하고 있어야 할 중요한 개념이므로, 실제 프로젝트에서 사용할 때 유의해야 합니다.

해시태그

#CORS #웹개발

목차