使用react-doc-viewer预览PDF时出现CORS错误的问题咨询

问题原因 #

直接在新标签页打开URI属于浏览器发起的顶级导航请求，这类请求不受前端JavaScript的CORS策略限制；而react-doc-viewer是通过前端JS（比如fetch/XHR）发起请求加载PDF内容用于渲染，这时候浏览器会严格执行CORS规则，所以会出现下载正常但预览报错的情况。

解决步骤 #

1. 配置Azure存储账户的CORS规则 #

登录Azure门户，找到你的存储账户，依次操作：

• 左侧菜单 → 资源共享（CORS）
• 添加一条新的CORS规则，配置以下关键参数：
  • 允许的来源：填写你的前端应用域名（开发环境可临时用*，生产环境务必指定具体域名）
  • 允许的方法：至少勾选GET（PDF预览需要读取文件内容）
  • 允许的标头：填写*（或根据实际请求头设置）
  • 公开的标头：填写*（或必要的响应头）
  • 最大年龄：设置为3600（或其他合适的缓存时长）
• 保存规则后，等待几分钟让配置生效。

2. 检查SAS URI的参数（如果使用SAS访问） #

如果你的PDF URI是带SAS令牌的，确保SAS令牌中的以下参数没有限制CORS响应头：

• rscc（缓存控制响应头）
• rscd（内容处置响应头）
• rsce（内容编码响应头）
  确保这些参数允许前端渲染所需的响应头，或者直接省略这些参数使用默认设置。

3. 验证请求细节 #

打开浏览器开发者工具的Network标签，找到触发CORS错误的PDF请求：

• 查看请求的Origin头是否匹配Azure CORS规则中的允许来源
• 查看响应头是否包含Access-Control-Allow-Origin，且值与请求的Origin一致
  根据检查结果调整Azure的CORS规则。

你的代码参考 #

const docs = [
  {
    uri: "{My URI From Storage}",
    fileType: 'pdf',
  },
]

<DocViewer
  pluginRenderers={DocViewerRenderers}
  documents={docs}
  config={{
    header: {
      disableHeader: true,
    },
  }}
  style={{ height: '85vh' }}
/>

内容的提问来源于stack exchange，提问作者Udit Gupta