웹 애플리케이션에서는 보안 상의 이유로 동일 출처 정책(Same-Origin Policy)에 의해 자바스크립트에서 다른 도메인의 파일을 다운로드할 수 없습니다. 하지만, Cross-Origin Resource Sharing (CORS)를 사용하면 이 제약을 우회할 수 있습니다. 이 글에서는 CORS를 활용하여 자바스크립트에서 다른 도메인의 파일을 다운로드하는 방법에 대해 알아보겠습니다.

CORS란?

CORS는 웹 브라우저에서 동일 출처 정책을 우회하여 자원에 접근할 수 있도록 하는 메커니즘입니다. 서버는 응답 헤더의 Access-Control-Allow-Origin 헤더를 설정하여 특정 도메인이 자원에 접근할 수 있는지 허용합니다.

자바스크립트에서 다른 도메인의 파일 다운로드하기

자바스크립트에서 다른 도메인의 파일을 다운로드하기 위해서는 서버에서 CORS 설정을 해주어야 합니다. 서버에서는 응답 헤더에 Access-Control-Allow-Origin 헤더를 포함하여 특정 도메인의 요청을 허용해야 합니다.

아래는 서버에서 CORS 설정을 하는 예시입니다. 이 예시는 파일 다운로드를 허용하는 모든 도메인에 대해서 CORS를 허용합니다.

// Node.js 예시
const http = require('http');

const server = http.createServer((req, res) => {
  // CORS 설정
  res.setHeader('Access-Control-Allow-Origin', '*');
  
  // 파일 다운로드 처리
  // ...
});

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

서버에서 CORS 설정을 하였다면, 자바스크립트에서는 XMLHttpRequest 객체나 fetch API를 사용하여 다른 도메인의 파일을 다운로드할 수 있습니다.

아래는 자바스크립트에서 fetch API를 사용하여 다른 도메인의 파일을 다운로드하는 예시입니다.

fetch('https://example.com/files/example.pdf')
  .then(response => {
    if (response.ok) {
      return response.blob();
    } else {
      throw new Error('파일을 다운로드할 수 없습니다.');
    }
  })
  .then(blob => {
    // 다운로드된 파일 처리
    // ...
  })
  .catch(error => {
    console.error(error);
  });

위 예시에서 주의할 점은, 서버에서 Access-Control-Allow-Origin 헤더를 설정한 도메인에서만 파일을 다운로드할 수 있다는 것입니다. 다른 도메인에서 파일을 다운로드하려면 서버에서 해당 도메인을 허용하도록 CORS 설정을 변경해야 합니다.

결론

CORS를 사용하여 자바스크립트에서 다른 도메인의 파일을 다운로드할 수 있습니다. 서버에서 Access-Control-Allow-Origin 헤더를 설정하여 특정 도메인의 요청을 허용하도록 CORS 설정을 변경하고, 자바스크립트에서 fetch API를 사용하여 파일을 다운로드할 수 있습니다. 중요한 점은 보안을 유지하기 위해 필요한 CORS 설정만을 허용하는 것입니다.

#CORS #파일다운로드