react-pdfを使って、urlからpdfを表示させたいです

Question

前提・実現したいこと

react-pdfを使って、urlからpdfを表示させたいです

発生している問題・エラーメッセージ

このサンドボックスのindex.jsxを
少し変えてやってみたのですが,
Failed to load PDF file.
となり、読み込めません

import React from "react";
import ReactDOM from "react-dom";
import { pdfjs, Document, Page } from "react-pdf";

import "./styles.css";

import samplePDF from "../sample.pdf";

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

function Test() {
  return (
    <Document
      file={
        "https://helpx.adobe.com/jp/acrobat/kb/cq07071635/_jcr_content/main-pars/download-section/download-1/file.res/sample.pdf"
      }
    >
      <Page pageNumber={1} />
    </Document>
  );
}

ReactDOM.render(<Test />, document.getElementById("app"));

試したこと

Documentのところを以下の様にしましたが、うまくいきませんでした。

<Document
      file={{
       url:  "https://helpx.adobe.com/jp/acrobat/kb/cq07071635/_jcr_content/main-pars/download-section/download-1/file.res/sample.pdf"
      }}
    >

Answer 1

CORSエラーの可能性がありますね。
ざっくり言うと同一のドメイン、つまり同じサービス間でしかリクエストによるリソース共有ができない、というエラーです。

https://developer.mozilla.org/ja/docs/Web/HTTP/CORS/Errors

サーバーにリクエストしたpdfを表示させたいのであれば、自分でサーバーを立てて、そこにpdfを配置し、Access-Control-Allow-Originの設定で、自分のアプリからのリクエストを許可することができると思います。