Retool加载不了S3签名PDF？问题出在浏览器

一个签名有效的S3链接，直接粘贴到浏览器能打开，塞进Retool的PDF组件却直接黑屏。这不是权限问题，也不是链接过期——是浏览器在搞事情。

周五下午的典型故障

Arsany Milad在Stackdrop做发票功能时踩了这个坑：用户上传PDF，保存，再打开预览——组件只显示"PDF couldn't be loaded"。

Retool控制台没报错。切到浏览器控制台，真相浮出水面：

「Access to fetch at 'https:///.../document.pdf?' from origin 'https://app.retool.com' has been blocked by CORS policy」

签名URL完全有效，单独打开毫无问题。但Retool的PDF组件内部用的是fetch()，而浏览器对fetch请求强制启用跨域资源共享（CORS）检查。S3桶没配置允许Retool域名访问，响应直接被浏览器拦截，组件连错误响应都收不到。

为什么地址栏能打开，组件却不行

这里有个容易混淆的机制差异。

粘贴URL到地址栏属于顶层导航请求，CORS规则不生效。Retool组件调fetch()则是跨域请求，浏览器会检查响应头里的Access-Control-Allow-Origin。

桶配置里没写https://app.retool.com，浏览器就拒绝把响应交给组件。URL有效、签名有效、IAM策略有效——唯独CORS配置缺了这一行。

修复只需三步，零代码改动

不需要改IAM，不需要动桶策略，不需要调整签名生成逻辑。纯配置问题，纯配置解决。

第一步：进AWS控制台打开目标S3桶。

第二步：在权限标签页找到CORS配置，填入：

「[ { "AllowedHeaders": ["*"], "AllowedMethods": ["GET", "HEAD"], "AllowedOrigins": [ "https://app.retool.com" ], "ExposeHeaders": [ "ETag", "Content-Type", "Content-Disposition" ], "MaxAgeSeconds": 3000 } ]」

如果用的是企业自定义域名（如https://yourcompany.retool.com），替换掉app.retool.com。不要用*.retool.com通配——那会放行所有Retool托管客户的应用，不只是你的。

配置里GET和HEAD足够PDF渲染。如果业务需要浏览器直传文件到S3（比如Arsany的发票上传场景），AllowedMethods要加上PUT。走后端中转上传的，不用加。

第三步：保存，刷新Retool，PDF正常显示。

这个案例的启示

现代前端工具链把fetch()包装得太干净，开发者容易忘记浏览器安全模型的存在。S3预签名URL解决的是"服务器是否允许访问"，CORS解决的是"浏览器是否允许页面读取响应"——两个层面的权限，缺一不可。

Retool作为低代码平台，把PDF渲染封装成拖拽组件，却没法替用户配置客户的S3桶。这种边界上的认知 gap，就是调试地狱的来源。

你的团队有没有遇到过类似场景——某个API在curl里跑得通，进前端就报错？最后发现是什么问题？