Quill项目PDF加载失败：Uploadthing URL返回403禁止访问错误

核心原因及修复方案 #

1. 调整Uploadthing文件访问权限规则 #

Uploadthing默认可能将上传文件设为私有，需在配置中开放读取权限：

• 在项目的Uploadthing核心配置文件（如app/api/uploadthing/core.ts）中，确保路由处理器的权限策略允许前端读取文件。如果是公开访问场景，可设置：

export const { GET, POST } = createRouteHandler({
  router: { pdfUploader },
  config: {
    permissions: {
      read: () => true, // 按需改为用户权限校验逻辑
    },
  },
});

• 同时登录Uploadthing控制台，检查项目对应的S3桶CORS配置，确保允许你的网站域名发起跨域请求。

2. 使用Uploadthing代理链接替代直接S3 URL #

不要直接使用返回的S3原始链接（https://uploadthing-prod.s3.us-west-2.amazonaws.com/${file.key}），改用Next.js代理路由访问文件：

• 前端通过/api/uploadthing/${file.key}路径访问上传的PDF，利用Uploadthing的API路由代理规避S3直接访问的权限限制。

3. 检查依赖版本与环境变量 #

• 更新Uploadthing至最新版本，修复旧版本可能存在的权限bug：

npm update uploadthing @uploadthing/react

• 验证.env文件中UPLOADTHING_SECRET和UPLOADTHING_APP_ID配置正确，这两个变量错误会导致权限验证失败。

4. 清理缓存并重新构建 #

清除Next.js缓存后重新构建项目，避免配置未生效：

rm -rf .next && npm run build

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