pdf.js 文件跨域

PDF.js 是一个用于解析和渲染 PDF 文件的 JavaScript 库，它可以在浏览器中直接显示 PDF 文件，而不需要依赖任何插件。当涉及到跨域问题时，主要是因为浏览器的同源策略限制了不同源之间的资源访问。

基础概念

同源策略：浏览器出于安全考虑，只允许同一源（协议、域名、端口相同）的文档或脚本互相访问对方的资源。

跨域资源共享（CORS）：一种机制，它使用额外的 HTTP 头来告诉浏览器，允许 Web 应用运行在一个源上，访问来自不同源服务器上的资源。

类型

简单请求：满足特定条件的请求（如 GET、POST 方法，特定的头部信息）。
预检请求：对于非简单请求，浏览器会先发送一个 OPTIONS 请求进行预检。

应用场景

Web 开发：当你的网页需要加载不同域名的 PDF 文件时。
API 服务：提供 PDF 文件下载或预览服务的后端接口。

遇到的问题及原因

如果你在使用 PDF.js 加载跨域的 PDF 文件时遇到问题，通常是因为服务器没有正确设置 CORS 头部，导致浏览器拒绝执行跨域请求。

解决方法

后端设置 CORS

确保提供 PDF 文件的服务器设置了适当的 CORS 头部。例如，如果你使用的是 Node.js 和 Express，可以这样设置：

const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*'); // 或者指定具体的域名
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

app.get('/pdfs/:filename', (req, res) => {
  const filePath = `/path/to/pdfs/${req.params.filename}`;
  res.sendFile(filePath);
});

app.listen(3000, () => console.log('Server running on port 3000'));

前端配置 PDF.js

在前端使用 PDF.js 时，确保正确处理跨域请求。如果服务器已经设置了 CORS，PDF.js 应该能够正常工作。如果没有，你可能需要配置代理服务器来绕过浏览器的同源策略。

示例代码

以下是一个简单的 PDF.js 使用示例，假设后端已经正确设置了 CORS：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>PDF.js Example</title>
  <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
</head>
<body>
  <canvas id="pdf-canvas"></canvas>
  <script>
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';

    const url = 'http://example.com/pdfs/sample.pdf'; // 跨域的 PDF 文件地址
    const loadingTask = pdfjsLib.getDocument(url);

    loadingTask.promise.then(function(pdf) {
      pdf.getPage(1).then(function(page) {
        const viewport = page.getViewport({ scale: 1.5 });
        const canvas = document.getElementById('pdf-canvas');
        const context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        const renderContext = {
          canvasContext: context,
          viewport: viewport
        };
        page.render(renderContext);
      });
    });
  </script>
</body>
</html>

通过以上设置和代码，你应该能够在浏览器中成功加载并显示跨域的 PDF 文件。