PDF Viewer 와 CORS 에러

개요

프로젝트를 진행하던 중, 사업자 등록증을 확인해야하는 기능이 필요했습니다.

저희 프로젝트가 허용하는 형식은 pdf, jpg, png 세 개의 형식입니다. pdf, jpg 에 대한 렌더링은 아주 빠르고 간단하나

PDF 만은 따로 viewer를 만들어줘야 한다는 사….실

그래서 PDF Viewer 를 만들면서 했던 삽질들을 공유해보고자 글을 썼습니다.

react-pdf-viewer

처음에 저는 react-pdf를 썼습니다. 공식문서에서 보여준 vite 예시도 정말 간단하게 되어있길래 그냥 시원~하게 갖다 썼습니다.

하지만 저를 반겨준 에러는

react-pdf Warning: Error: Setting up fake worker failed: "Failed to fetch dynamically imported module:

많은 분들이 같은 에러를 겪고 있었고, 대부분은 해결하셨더라고요.. 저는 못했습니다.

스택오버플로우, 지선생님 모두 제가 원하는 대답은 말해주지 못하였죠..

가짜워커를 쓰고있다고 하지않나.. 삽질을 연속적으로 하던 중에 다른 라이브러리를 한 번 찾아보자 싶었습니다

그렇게 찾게 된 것이 react-pdf-viewer!

사용된 라이브러리

설치

npm install @react-pdf-viewer/core @react-pdf-viewer/default-layout pdfjs-dist

코드

import React from "react";
import { Viewer, Worker } from "@react-pdf-viewer/core";
import { defaultLayoutPlugin } from "@react-pdf-viewer/default-layout";
import "@react-pdf-viewer/core/lib/styles/index.css";
import "@react-pdf-viewer/default-layout/lib/styles/index.css";

interface PDFViewerProps {
  link: string | Uint8Array;
}

const PDFViewer: React.FC<PDFViewerProps> = ({ link }) => {
  const defaultLayoutPluginInstance = defaultLayoutPlugin();

  return (
    <div style={{ height: "100vh" }}>
      <Worker workerUrl="https://unpkg.com/pdfjs-dist@3.11.174/build/pdf.worker.min.js">
        <Viewer fileUrl={link} plugins={[defaultLayoutPluginInstance]} />
      </Worker>
    </div>
  );
};

export default PDFViewer;

아주 쉽게 끝나버렸다..

뭐 물론 3.4….. 버전이 worker가 어쩌구 하는 에러가 떴지만

에러에 버전명을 확실히 명시해줘서 쉽게 해결했고, 잘 나온다!

근데 또 난관에 부딪힌 것은 CORS 에러…

CORS

cors 에러가 왜났을까?

우리 프로젝트에는 회원가입 → 사업자등록증을 등록 → 서버에서 s3로 넘김 → admin에서 가져옴

이런 프로세스로 pdf 파일을 가져오고 있습니다.

근데 aws s3에서는 기본적으로 cross-origin 에 대한 허용을 하고있지 않기 때문에

거기에 대한 정책을 작성해줘야했습니다!

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "test-domain",
            "product-domain"
        ],
        "ExposeHeaders": [
            "ETag"
        ]
    }
]

버킷 정책으로 객체에 엑세스 하는 것만으로는 접근할 수 없었습니다!

그래서 CORS 를 설정해줬고, 문제를 해결헀습니다..

역시 삽질은 참.. 재미있네요..