如何通过授权代理端点设置<embed>的src以展示受限云存储PDF？

核心思路 #

利用你搭建的授权代理端点作为<embed>的数据源，由代理完成用户身份校验、云存储文件拉取和PDF内容转发，全程对用户隐藏真实存储地址，完全符合你的需求。

具体实现步骤 #

1. 完善代理端点的处理逻辑 #

代理服务端需要完成以下关键操作：

• 身份验证：通过请求头的Token、Session或Cookie验证当前用户身份
• 文件定位：根据用户ID/标识，找到其专属命名空间下的目标PDF文件
• 安全拉取：使用服务端持有的云存储密钥/凭证，从受限存储中获取PDF文件
• 响应配置：返回正确的响应头，确保浏览器能嵌入展示PDF
  必须设置的响应头：

  Content-Type: application/pdf
  Content-Disposition: inline; filename="user-contract.pdf"
  

  可选优化头：

  Cache-Control: no-cache, no-store  # 避免缓存旧文件（按需调整）
  X-Content-Type-Options: nosniff    # 防止浏览器误解析内容
  

2. 前端<embed>组件的使用 #

直接将代理端点URL作为<embed>的src属性即可，若代理与前端同域，浏览器会自动携带当前用户的Cookie（适合Session或Cookie-based认证）；若跨域，需确保代理配置了跨域允许凭证的规则。

示例代码：

<!-- 基础嵌入示例 -->
<embed 
  src="/api/proxy/user-contract" 
  type="application/pdf" 
  width="100%" 
  height="800px"
>

<!-- 带错误处理的增强版 -->
<div id="pdf-container">
  <div class="loading-state">合同加载中...</div>
  <embed 
    src="/api/proxy/user-contract" 
    type="application/pdf" 
    width="100%" 
    height="800px"
    onload="document.querySelector('.loading-state').remove()"
    onerror="handlePdfError()"
  >
</div>

<script>
function handlePdfError() {
  document.querySelector('#pdf-container').innerHTML = 
    '<p style="color:red;">无法加载合同，请检查您的权限或稍后重试</p>';
}
</script>

3. 异常与优化处理 #

• 权限校验失败：代理端点返回401/403状态码，前端通过error事件捕获并提示用户
• 大文件加载：代理端采用流式传输（而非一次性读取整个文件），提升加载体验
• 兼容性兜底：若需支持旧浏览器，可替换为<object>标签，语法与<embed>基本一致

内容的提问来源于stack exchange，提问作者michal.kyjovsky