CORS를 사용하여 자바스크립트에서 다른 도메인의 이미지를 로딩하는 방법에 대해 알아보세요.

12 Oct 2023

cors

웹 개발자들은 자바스크립트를 사용하여 웹 페이지에 이미지를 로드하는 일이 흔합니다. 그러나 만약 이미지가 다른 도메인에 호스팅되어 있다면, CORS (Cross-Origin Resource Sharing)를 사용하여 자바스크립트로 해당 이미지를 로딩해야 합니다. 이번 블로그에서는 CORS를 사용하여 자바스크립트에서 다른 도메인의 이미지를 로딩하는 방법에 대해 알아보겠습니다.

CORS란 무엇인가요?

CORS는 웹 애플리케이션에서 리소스를 요청 할 때 발생하는 보안 상의 이슈를 해결하기 위해 도입된 메커니즘입니다. 이를 통해 웹 페이지가 다른 도메인에서 리소스를 요청 할 수 있으며, 서버도 이 요청을 허용할 수 있는 기능을 제공합니다. 이는 기본적으로 브라우저에서 이뤄지는 보안 메커니즘이기 때문에 자바스크립트에서는 CORS를 사용하여 요청을 수행할 수 있습니다.

CORS를 사용하여 이미지 로딩하기

자바스크립트에서 CORS를 사용하여 다른 도메인의 이미지를 로딩하는 방법은 간단합니다. 다음 단계를 따라해 보세요:

HTML 파일에 <img> 요소를 추가하여 이미지를 표시합니다.
```
<img id="myImage" src="#" alt="External Image">
```

자바스크립트 코드에서 XMLHttpRequest 객체를 사용하여 이미지를 요청합니다. 이 때, CORS를 활성화하기 위해 withCredentials 속성을 true로 설정해야 합니다.

const xhr = new XMLHttpRequest();
const imageUrl = "http://example.com/image.jpg";
xhr.open("GET", imageUrl, true);
xhr.withCredentials = true;
xhr.responseType = "blob";
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const blob = xhr.response;
    const myImage = document.getElementById("myImage");
    myImage.src = URL.createObjectURL(blob);
  }
};
xhr.send();

위 코드에서 imageUrl을 로드하고자 하는 이미지의 URL로 변경해야 합니다.

해당 이미지가 CORS를 지원하는 서버에서 호스팅되고 있는지 확인하십시오. CORS를 구성하지 않았다면, 브라우저는 해당 이미지의 로딩을 차단할 수 있습니다.

이제 자바스크립트 코드를 실행하면 지정된 이미지가 로딩되어 표시됩니다.

요약

CORS를 사용하여 자바스크립트에서 다른 도메인의 이미지를 로딩하는 방법을 살펴보았습니다. CORS를 이용하면 브라우저의 보안 정책으로 인해 차단되는 동일 출처 이외의 리소스에 접근할 수 있게 됩니다. 위에서 설명한 단계를 따라 이미지를 로딩할 수 있습니다.