PDF加载失败页面空白或报“no 'access-control-allow-origin' header”错误，需从路径、协议、服务端CORS配置及组件生命周期四方面排查：确保PDF可通过浏览器直连访问、禁用file://协议、Nginx配置Access-Control-Allow-Origin等响应头、开发环境用Vite代理绕过跨域、pdfUrl为响应式非空值且在mounted后初始化。
PDF加载失败时页面空白或控制台报错“no 'access-control-allow-origin' header”，说明浏览器因安全策略拦截了资源请求，必须从路径、协议、服务端配置和组件生命周期四个层面逐一排查并修正。
确认PDF能否被浏览器直接访问
在浏览器地址栏粘贴PDF的完整URL（例如 https://example.com/docs/report.pdf），回车访问。如果出现下载弹窗或正常预览，说明文件可达；若显示404、跨域错误或空白页，则路径或服务端有问题。
使用相对路径时，确保它基于项目 public 目录（如 /pdf/manual.pdf），而非 src 下的静态资源——Vue 构建后 src 中的文件不会被直接 HTTP 服务。
禁止使用 file:// 协议加载本地PDF，现代浏览器会直接拒绝请求。必须通过本地开发服务器（Vite/Webpack Dev Server）运行项目。
检查并修复跨域问题
方法一：服务端配置CORS头（推荐）
在Nginx中添加以下三行：
add_header 'Access-Control-Allow-Origin' '*';<br>add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';<br>add_header 'Access-Control-Allow-Headers' 'Content-Type';
注意：生产环境不建议设为 *，应明确指定前端域名，例如 https://your-app.com。
方法二：改用代理绕过浏览器同源限制
在 Vite 配置中设置 dev server proxy：
server: { proxy: { '/api/pdf': { target: 'https://remote-pdf-server.com', changeOrigin: true } } }
然后在组件中请求 /api/pdf/report.pdf，由开发服务器转发并自动携带CORS响应头。
方法三：对CDN托管的PDF启用CORS支持
GitHub Pages 默认禁用CORS，无法加载PDF；Cloudflare Pages 和 Netlify 允许在 _headers 文件中声明：
/pdf/*.pdf<br> Access-Control-Allow-Origin: *
校验vue-pdf组件初始化时机
第一步：确认PDF URL已就绪再初始化组件
不要在 data 中直接赋值 url，而应在 mounted 后、或响应式数据更新后再渲染 PDF 组件。
第二步：避免在 created 阶段调用 load 或 render 方法
此时 DOM 尚未挂载，ref 为空，PDF 实例无法绑定容器，必然失败。
第三步：监听 url 变化并重载 PDF
使用 watch 监听 PDF 路径变量，变化时调用 this.$refs.pdf?.load()，而不是依赖 v-if 控制组件销毁重建——后者可能触发重复初始化异常。
若使用 <pdf :src="pdfUrl"></pdf>，确保 pdfUrl 是响应式属性且非 undefined 或空字符串，否则 vue-pdf 内部会静默跳过加载。
验证PDF文件本身是否损坏
将PDF文件拖入 Chrome 或 Edge 浏览器窗口，观察是否能独立打开。若提示“文件已损坏”或仅显示前几页，说明文件结构异常。
重新下载该PDF：右键链接 → “另存为”，不要通过迅雷等第三方工具中转，避免传输中断导致文件截断。
检查文件大小是否合理——若小于1KB，大概率是空文件或下载失败；若比原始文件小30%以上，需怀疑传输不完整。
用 hex editor 查看文件头是否为 %PDF-（ASCII码 25 50 44 46 2D），不是则非标准PDF，vue-pdf无法解析。
