node配置服务器跨域使pdfjs加载非同源文件 • w00d1f

pdfjs因为同源策略，只能加载本地的pdf，想要加载远程的pdf就会报跨域的错，查看官方文档后发现pdfjs本身并不阻止加载远程pdf文件，只要文件服务器配置好跨域即可。

这里使用了node中的express框架搭建了一个简单的静态文件服务器。

// pdfjs官网issue提供的跨域配置方案
// {
//   "Access-Control-Allow-Origin": "*",
//   "Access-Control-Allow-Headers": "range",
//   "Access-Control-Expose-Headers": "content-range, content-length, accept-ranges",
//   "Access-Control-Allow-Methods": "*"
// }
// 引入express
const express = require("express");
const app = express();

// 根据官方文档中的issue配置跨域
app.all("*", function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "range");
  res.header(
    "Access-Control-Expose-Headers",
    "content-range, content-length, accept-ranges",
  );
  res.header("Access-Control-Allow-Methods", "*");
  next();
});

// 配置静态文件目录
app.use(express.static("public"));

// 监听服务器的某个端口
const server = app.listen(8082, function () {
  console.log("server-start");
});

配置好跨域后，你会发现还是报跨域的错，在pdfjs源码中查找file origin does not match viewer，就会发现源码中只要不是同源就会抛出异常，注释掉原码中的throw error即可。

if (origin !== viewerOrigin && protocol !== "blob:") {
  // throw new Error('file origin does not match viewer\'s');
}