CSP error when adding media to dataset with local docker-compose setup

问题场景

用户使用自托管 Langfuse（docker-compose 方式部署，MinIO 作为媒体存储）时，在 Web 界面创建数据集并给数据集条目（dataset item）附加媒体文件（PDF、JPG 等），浏览器控制台出现 CSP（Content Security Policy）错误。通过 Python SDK 添加数据集条目不受影响，web 容器和 MinIO 容器日志中也没有错误输出。

报错原文

CSP error when adding media to dataset with local docker-compose setup

原因分析

问题出在 Langfuse 前端 web/next.config.mjs 中硬编码的 CSP 配置。connect-src 指令只包含 https://*.s3.amazonaws.com 等 AWS S3 相关通配符，没有包含本地 MinIO 的 http://localhost:*。浏览器直接通过 fetch/XHR 向 http://localhost:9090 发送 PUT 请求上传文件时，被 CSP 策略拦截。虽然 media-src 允许 http://localhost:*，但媒体上传走的是 connect-src 规则而非 media-src，所以无法绕过。这与 Azure Blob Storage 场景（Issue #14613）是同一类问题。

环境排查

• 确认 Langfuse 版本是否为 v4.13.0 或类似自托管版本
• 确认 docker-compose 部署方式，检查 web/next.config.mjs 中 connect-src 的实际配置
• 确认 LANGFUSE_S3_MEDIA_UPLOAD_ENDPOINT 指向本地 MinIO 的地址和端口（默认为 http://localhost:9090）
• 查看是否有额外反向代理层叠加 CSP 头（该方案已被社区验证不可靠）

解决步骤

1. 确认 Langfuse API 和 Web 服务运行正常，排除其他网络或服务问题。
2. 在 Langfuse 源码中找到 web/next.config.mjs，定位 CSP 配置中的 connect-src 指令。
3. 在 connect-src 中添加 http://localhost:*（如果 MinIO 使用其他端口，按实际端口调整）。
4. 从源码重新构建前端镜像并重新部署到 docker-compose 环境。
5. 在浏览器中重新执行创建数据集条目并上传媒体文件的操作。

验证方法

在浏览器开发者工具（F12）中打开 Console 面板，重新执行上传操作后确认没有新的 CSP 报错；同时检查网络（Network）面板中是否有成功完成的 PUT 请求。建议同时重启 web 容器并清空浏览器缓存（或使用无痕窗口）后再次验证。

参考来源

langfuse/langfuse #16297

AI 工具推荐

想把多个 AI 模型放在一个入口？

GamsGo AI 集成 ChatGPT、DeepSeek、Gemini、Claude、Midjourney、Veo 等常用模型，适合写作、绘图、视频和日常 AI 工作流。

了解 GamsGo AI

推广链接：通过此链接购买，我可能获得佣金，不影响你的价格。