Next.js特定路由AWS S3存储PDF无法预览CORB报错修复

• 核心触发点是S3存储桶CORS配置缺失必要规则，加上Next.js动态路由下react-pdf的资源加载逻辑触发了严格的CORB校验：
  1. 现有S3 CORS配置未允许HEAD方法（react-pdf加载PDF前会先发HEAD请求获取文件元信息），AllowedHeaders为空、未暴露分段加载所需的响应头，跨域请求返回的PDF响应缺少合法CORS头，被浏览器CORB策略拦截。
  2. 图片资源不受影响是因为浏览器对图片类跨域资源的CORB校验等级更低，不需要完整CORS头即可加载。
  3. 列表路由下PDF请求由浏览器预加载作为静态资源发起，Sec-Fetch-Dest为empty，校验宽松；动态路由下react-pdf通过fetch API主动拉取PDF资源，Sec-Fetch-Dest为object，会触发严格CORB校验。
  4. 报错中出现的execute-api.us-east-2.amazonaws.com域名，说明动态路由下存在隐式路径解析或重写规则，部分PDF请求被错误转发到了非S3地址，进一步加剧了问题。

1. 更新S3 CORS配置 #

将原有CORS配置替换为以下内容，覆盖react-pdf加载所需的方法、头和暴露字段：

[
  {
    "AllowedHeaders": ["*"],
    "AllowedMethods": ["GET", "HEAD"],
    "AllowedOrigins": ["*"],
    "ExposeHeaders": [
      "Content-Length",
      "Content-Type",
      "ETag",
      "Last-Modified",
      "Accept-Ranges",
      "Content-Range"
    ],
    "MaxAgeSeconds": 3000
  }
]

2. 修复react-pdf组件传参 #

不要直接给Document组件传URL字符串，显式传入配置对象，同时确保传入的文件地址是带https://前缀的完整绝对S3 URL，避免动态路由下被解析为相对路径：

<Document 
  file={{
    url: file, // 必须为https开头的完整S3资源地址
    withCredentials: false,
    httpHeaders: {
      'Accept': 'application/pdf'
    }
  }} 
  onLoadSuccess={onDocumentLoadSuccess}
  loading={<div className="p-4">PDF加载中</div>}
>
  <Page
    key={`page_${1}`}
    pageNumber={1}
    renderAnnotationLayer={false}
    renderTextLayer={false}
    className="flex w-full"
    style={{ display: 'flex' }}
  />
</Document>

3. 排查Next.js路由配置 #

• 检查next.config.js中的rewrites、redirects规则，删除所有会将动态路由/generic-entity/[id]下的.pdf后缀请求转发到API网关（即报错中的execute-api域名）的配置。
• 将S3存储桶域名加入Next.js远程资源白名单，避免被默认安全规则拦截：

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'my-test-bucket.s3.eu-south-1.amazonaws.com',
      },
    ],
  },
}

4. 验证修复 #

• 清空浏览器缓存后打开动态路由页面，在DevTools网络面板中确认PDF请求的目标地址为正确的S3域名，响应头包含Access-Control-Allow-Origin: *、Accept-Ranges: bytes字段。
• 确认请求顺序为先发HEAD请求校验元信息，再发GET请求分段加载PDF，无跨域报错即为修复成功。
• 如果仍有异常，检查历史上传的PDF文件的ContentType是否为application/pdf，原有上传逻辑对旧文件可能存在ContentType标记错误的问题，重新上传测试文件验证即可。

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