pdf.js 跨域加载文件

PDF.js 是一个由Mozilla开发的、用于在Web浏览器中解析和渲染PDF文件的开源JavaScript库。当涉及到跨域加载PDF文件时，可能会遇到浏览器的同源策略限制，这会导致无法直接从不同的源加载文件。

基础概念

同源策略：是一种安全机制，它限制了一个源的文档或脚本如何与另一个源的资源进行交互。只有协议、域名和端口完全相同的两个URL才被认为是同源的。

类型

简单请求：满足特定条件的HTTP请求（如GET、POST等）。
预检请求：非简单请求在发送前会先发送一个OPTIONS请求进行预检。

应用场景

在线文档预览：用户可以在不同域名下的网站上预览PDF文件。
资源共享：多个应用间共享PDF资源。

遇到的问题及原因

当使用PDF.js尝试跨域加载PDF文件时，可能会遇到以下问题：

CORS错误：浏览器阻止了跨域请求，因为服务器没有正确设置CORS（跨源资源共享）头部。

解决方法

服务器端设置CORS

确保提供PDF文件的服务器设置了正确的CORS头部。例如，在Apache服务器上，可以在.htaccess文件中添加以下内容：

Header set Access-Control-Allow-Origin "*"

在Nginx服务器上，可以在配置文件中添加：

add_header Access-Control-Allow-Origin *;

使用代理服务器

如果无法修改源服务器的设置，可以使用一个同源的代理服务器来转发请求。例如，使用Node.js和Express创建一个简单的代理：

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

app.get('/proxy', (req, res) => {
  const url = req.query.url;
  request(url).pipe(res);
});

app.listen(3000, () => {
  console.log('Proxy server running on port 3000');
});

然后在PDF.js中使用这个代理URL来加载PDF文件。

使用PDF.js的WorkerSrc选项

PDF.js允许指定一个同源的WorkerSrc路径，这样可以在不同的源上加载PDF文件，但需要确保WorkerSrc指向的资源是同源的。

PDFJS.workerSrc = 'https://example.com/pdf.worker.js';

示例代码

以下是一个简单的PDF.js跨域加载PDF文件的示例：

<!DOCTYPE html>
<html>
<head>
  <title>PDF.js Cross-Origin Example</title>
  <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
</head>
<body>
  <canvas id="pdf-canvas"></canvas>
  <script>
    PDFJS.GlobalWorkerOptions.workerSrc = 'https://example.com/pdf.worker.js';
    var url = 'https://anotherdomain.com/sample.pdf';

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

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

在这个示例中，确保pdf.worker.js是同源的，并且服务器设置了适当的CORS头部。

通过以上方法，可以有效地解决PDF.js跨域加载文件时遇到的问题。