브라우저 CORS 오류 해결: jsPDF CDN 로드 시 발생하는 문제와 올바른 사용법

jsPDF 사용 시 발생하는 CORS 오류와 해결 방법

외부 라이브러리인 jsPDF를 활용해 PDF 파일을 생성하려 할 때, 다음과 같은 CORS 오류가 발생한 경험이 있으신가요?


Access to XMLHttpRequest at 'https://cdn.sample.com/jspdf@latest/dist/jspdf.umd.min.js' 
from origin 'https://admin.sampledomain.com' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

이 오류는 단순히 스크립트를 잘못 불러온 문제가 아니라, 브라우저의 보안 정책(CORS 정책)에 의해 외부 스크립트 로딩 방식이 잘못되었을 때 발생합니다.

오류 원인 분석

브라우저는 보안을 위해 외부 도메인에서 fetch나 XMLHttpRequest를 통해 리소스를 요청할 경우, 해당 리소스 서버가 Access-Control-Allow-Origin 헤더를 명시하지 않으면 차단합니다.

하지만 <script src="...">는 CORS 정책을 적용받지 않기 때문에 정상적으로 작동해야 합니다. 그런데도 오류가 발생한다면, 내부 코드에서 잘못된 방식으로 jsPDF를 동적으로 불러오고 있을 가능성이 큽니다.


//  이렇게 fetch로 불러오면 CORS 에러가 발생합니다
fetch("https://cdn.sample.com/jspdf@latest/dist/jspdf.umd.min.js")
  .then(res => res.text())
  .then(code => eval(code));

해결 방법

1. <script> 태그로 직접 불러오기 (정상적인 방식)

<script src="https://cdn.sample.com/jspdf@latest/dist/jspdf.umd.min.js"></script>

불러온 후에는 아래처럼 jsPDF 객체를 사용할 수 있습니다:


const { jsPDF } = window.jspdf;
const doc = new jsPDF();
doc.text("Hello World!", 10, 10);
doc.save("sample.pdf");

2. 로컬에서 직접 jsPDF 파일 호스팅

CORS 문제 없이 완전히 제어 가능한 방법입니다:

jsPDF 파일을 직접 다운로드합니다.
예: /static/js/jspdf.umd.min.js 경로에 배치합니다.
아래처럼 참조합니다:

<script src="/static/js/jspdf.umd.min.js"></script>

3. npm을 통한 로컬 번들링 (SPA 프로젝트)

npm install jspdf

Webpack, Vite 등의 번들러로 포함하면 CORS 걱정 없이 안정적으로 사용할 수 있습니다.

결론

jsPDF는 CDN으로 불러올 때 <script> 방식만 사용해야 합니다.
내부에서 fetch나 XMLHttpRequest를 통해 JS 파일을 불러오면 CORS 정책에 의해 차단됩니다.
오류 발생 시, 내부 코드에서 잘못된 방식으로 jsPDF를 동적으로 요청하고 있는지 점검하세요.

예시 도메인 및 주소:

https://cdn.sample.com: 외부 CDN 서버 주소
https://admin.sampledomain.com: 프론트엔드 웹사이트 주소

※ 실제 서비스 도메인 및 데이터베이스 명 등은 보안을 위해 예시로 대체하였습니다.