React项目使用react-pdf加载PDF文件失败求助

我尝试通过npm安装的react-pdf包展示PDF文件，编写代码如下：

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

function PDFLayout(props){
  pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }

  return (
    <div>
      {/* 文件地址为临时测试用 */}
      <Document file="https://www.orimi.com/pdf-test.pdf" onLoadSuccess={onDocumentLoadSuccess}>
        <Page pageNumber={pageNumber} />
      </Document>
      <p>
        Page {pageNumber} of {numPages}
      </p>
    </div>
  );
}
export default PDFLayout;

但路由到该React组件时出现错误：

Failed to load pdf file

我已查阅Stack Overflow（SO）和GitHub（GH）上的相关问题，但现有解决方案均无效，恳请提供帮助。

可行的排查与解决方法 #

• 解决跨域问题：目标PDF地址大概率存在CORS限制，浏览器会拦截跨域资源请求。建议将PDF文件下载到本地项目的public目录下，使用相对路径引入，例如：file="/pdf-test.pdf"。
• 指定workerSrc的完整协议：当前代码中workerSrc使用的是//协议相对路径，部分环境下可能无法自动适配，改为完整的https://协议路径：

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

• 更新react-pdf版本：版本兼容性问题可能导致加载失败，执行命令更新到最新稳定版：

  npm update react-pdf
  

• 添加错误日志定位问题：给Document组件添加onLoadError回调，打印具体错误信息，便于精准排查：

  <Document 
    file="https://www.orimi.com/pdf-test.pdf" 
    onLoadSuccess={onDocumentLoadSuccess}
    onLoadError={(error) => console.error("PDF加载失败详情:", error)}
  >
  

• 验证目标PDF的可访问性：直接在浏览器地址栏打开https://www.orimi.com/pdf-test.pdf，确认文件能正常下载和打开，排除网络或文件本身的问题。

内容的提问来源于stack exchange，提问作者Ali