Supabase Storage公开URL无法加载PDF文档，Next.js集成问题求助

排查修复方案 #

1. 核对文件MIME类型 #

Supabase自动识别文件类型偶尔会出错，尤其是上传时没指定类型的情况：

• 进入Supabase控制台找到对应PDF，查看Metadata里的content-type是否为application/pdf
• 若类型不对，用Supabase CLI或代码更新：

  # CLI更新文件元数据
  supabase storage update bucket-name/path/to/file.pdf --content-type application/pdf
  

  或者在Next.js上传时直接指定：

  const { data, error } = await supabase.storage
    .from('bucket-name')
    .upload('path/to/file.pdf', file, {
      contentType: 'application/pdf'
    })
  

2. 确认文件完整性 #

• 重新上传一次PDF，确保上传过程无中断
• 将控制台下载的文件与URL获取的文件做MD5校验，确认内容完全一致

3. 检查CORS配置 #

Chrome对跨域资源的MIME类型校验严格，CORS配置不当会导致加载失败：

• 进入Supabase控制台的Storage设置，找到CORS Configuration
• 确保允许你的Next.js域名访问，同时放行application/pdf类型：

  [
    {
      "origin": ["https://你的Next.js域名"],
      "method": ["GET"],
      "headers": ["Content-Type"],
      "maxAge": 3600
    }
  ]
  

  测试阶段可暂时设置origin: ["*"]排除CORS问题

4. 在Next.js中做请求代理 #

如果直接访问Supabase URL仍有问题，用Next.js的API路由代理请求，绕开浏览器校验限制：

// app/api/pdf/[path]/route.js
import { createClient } from '@supabase/supabase-js';

export async function GET(request, { params }) {
  const supabase = createClient(process.env.NEXT_PUBLIC_SUPABASE_URL, process.env.SUPABASE_SERVICE_ROLE_KEY);
  
  const { data, error } = await supabase.storage
    .from('bucket-name')
    .download(params.path);
  
  if (error) {
    return new Response('文件未找到', { status: 404 });
  }
  
  return new Response(data, {
    headers: {
      'Content-Type': 'application/pdf',
      'Content-Disposition': 'inline; filename="document.pdf"'
    }
  });
}

之后在页面中使用代理后的URL：/api/pdf/path/to/file.pdf

5. 排查浏览器端问题 #

• 清除Chrome缓存，或用隐身模式打开链接
• 禁用第三方PDF查看扩展，改用Chrome内置阅读器尝试

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