ngx-extended-pdf-viewer部署后无法预览带Token的受保护PDF

问题背景 #

开发了一个.NET项目，PDF文件需通过带Token的查询字符串访问（格式：https://example.com/Resources/file.pdf?token=token），直接在浏览器打开链接可正常显示。配套的Angular项目使用ngx-extended-pdf-viewer预览PDF，本地localhost环境运行正常，但部署到Ubuntu服务器后加载失败，控制台报CORS相关错误。

报错信息 #

• Cross-Origin Request Blocked: 同源策略禁止读取远程资源https://example.com/path/file.pdf?token=user_Token。原因：CORS请求未成功。状态码：(null)
• PDF加载出错。PDF.js v3.10.557 (build: cb0a59411) 消息：获取资源时发生网络错误。 >> 来自文件 >> viewer-3.10.557.min.js
• Uncaught (in promise) Object { message: "获取资源时发生网络错误。", name: "UnknownErrorException", details: "TypeError: 获取资源时发生网络错误。", stack: "BaseExceptionClosure@https://..." }

相关Angular代码 #

<ngx-extended-pdf-viewer [src]="previewService.getProtectedUrl(fileSrc)" [useBrowserLocale]="true"></ngx-extended-pdf-viewer>

解决方案 #

1. 配置.NET后端CORS策略 #

浏览器直接访问PDF链接是普通GET请求，不受同源策略限制；但ngx-extended-pdf-viewer底层依赖PDF.js的fetch API发起请求，会触发浏览器的CORS校验。需在.NET后端添加CORS配置，允许Angular部署域名的跨域请求：

在Program.cs中添加以下代码：

// 注册CORS服务
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAngularDomain",
        policy => policy.WithOrigins("https://你的Angular部署域名") // 替换为实际域名，如https://angular.example.com
                        .AllowAnyHeader()
                        .AllowAnyMethod());
});

// 启用CORS（放在UseRouting之后，UseAuthorization之前）
app.UseCors("AllowAngularDomain");

若请求需要携带凭证（如Cookie），可在策略中追加.AllowCredentials()。

2. 检查Ubuntu服务器反向代理配置 #

若.NET项目通过Nginx等反向代理部署，需确保代理未覆盖后端返回的CORS响应头。例如Nginx配置中不要手动添加Access-Control-Allow-Origin，让后端自行返回正确的头信息。

3. 验证URL生成正确性 #

确认previewService.getProtectedUrl(fileSrc)生成的URL格式正确，Token未被错误编码或丢失。可在浏览器控制台打印生成的URL，检查是否与直接访问的有效URL一致。

4. 替代方案：Angular代理转发（无法修改后端时） #

若暂时无法调整后端CORS配置，可通过Angular代理将PDF请求转发到.NET域名，规避跨域问题：

1. 项目根目录创建proxy.conf.json：

{
  "/Resources": {
    "target": "https://example.com",
    "secure": true,
    "changeOrigin": true
  }
}

2. 修改angular.json，在build和serve的options中添加"proxyConfig": "proxy.conf.json"。
3. 调整Angular代码，使用相对路径生成PDF链接（如/Resources/file.pdf?token=xxx），请求会自动代理到目标域名。

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