私有云存储桶中PDF预览的CORS跨域问题求助

问题根源分析 #

1. CORS配置的Origin匹配错误：你配置的origin是http://localhost:3500/（带末尾斜杠），但浏览器实际发送的请求Origin是http://localhost:3500（无斜杠），两者不匹配，导致存储桶不返回Access-Control-Allow-Origin头。
2. 前端请求头错误：react-pdf配置里加的Access-Control-Allow-Origin、Access-Control-Allow-Methods这些是服务器返回的响应头，不是前端请求该带的，反而会触发额外的预检请求，且服务器无法识别这些请求头，导致预检失败。
3. 私有存储桶的权限问题：私有存储桶的原始URL本身不允许匿名访问，即使CORS配置正确，也会返回403，必须通过签名URL赋予临时访问权限。

分步解决 #

1. 修正云存储桶的CORS配置 #

更新CORS规则，去掉Origin末尾的斜杠，同时添加maxAgeSeconds缓存预检请求结果：

[
  {
    "origin": ["http://localhost:3500"],
    "responseHeader": ["Content-Type", "Cache-Control"],
    "method": ["GET", "HEAD", "OPTIONS"],
    "maxAgeSeconds": 3600
  }
]

配置更新后，需等待几分钟让规则生效（云存储的CORS配置不会即时生效）。

2. 调整react-pdf组件代码 #

删除错误的请求头配置，关闭不必要的withCredentials（私有存储桶用签名URL不需要凭证）：

<Document
  file={PDF_SIGNED_URL || ''}
  options={{
    withCredentials: false
    // 移除所有Access-Control相关的请求头配置
  }}
  loading={
    <Box
      sx={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
      }}
    >
      <CircularProgress />
    </Box>
  }
  error={'Failed to load PDF preview'}
>
  <Page
    pageNumber={1}
    height={300}
  />
</Document>

3. 生成私有文档的签名URL #

因为存储桶是私有，直接用原始URL前端无法访问，需要在后端生成带有效期的签名URL：

• 后端（如Cloud Functions、你的应用服务器）调用云存储的SDK生成签名URL，设置合理的有效期（比如1小时）
• 将Firestore中存储的原始文档URL替换为生成的签名URL，前端直接使用这个签名URL加载PDF
• 签名URL会自动继承存储桶的CORS配置，同时赋予临时访问权限，不会暴露存储桶的永久权限

关键注意点 #

• 不要在前端请求中添加任何Access-Control-*头，这些都是服务器的响应头，前端无权设置
• CORS配置的Origin必须和浏览器发送的Origin完全一致（包括协议、域名、端口，不能多斜杠）
• 私有存储桶的文档预览必须用签名URL，不能直接暴露原始URL，否则会导致权限泄露

内容的提问来源于stack exchange，提问作者Lofton Gentry