嵌入 Iframe 时如何为 Heroku 上的 Streamlit 应用程序配置 CORS？

Question

我将 Heroku 上托管的 Streamlit 应用程序嵌入到 Next.js 应用程序的 iframe 中。 Streamlit 应用程序具有 CSV 上传功能，直接访问时工作正常，但会抛出

AxiosError: Request failed with status code 403

通过 iframe（在另一个域中）使用时。

这似乎是一个 CORS 问题。我正在寻找有关如何在 Heroku 上配置 CORS 以允许来自我的 Next.js 应用程序域的请求的指南。

我检查了这些主题，但没有运气：

• 在 Iframe 中嵌入 Streamlit 应用程序时文件上传器 403 错误
• 作为 Iframe 的嵌入式 Streamlit 应用程序：XMLHttpRequest 和 CORS 错误
• 在 Next.js Iframe 中嵌入的 Streamlit 应用程序中接收 postMessage 事件的问题

有人解决过这个问题或者有什么建议吗？

Answer 1

我通过调整

setup.sh

脚本成功解决了CORS问题。我只设置了

enableCORS = false

，但您还必须禁用 XSRF 保护。这是解决问题的更新的

setup.sh

文件：

mkdir -p ~/.streamlit/

echo "\
[server]\n\
headless = true\n\
port = \$PORT\n\
enableXsrfProtection=false\n\
enableCORS = false\n\
" > ~/.streamlit/config.toml

通过将

enableXsrfProtection

和

enableCORS

设置为 false，我消除了上传问题。请注意，禁用这些功能可能会对您的应用程序的安全产生影响。

对于任何面临类似问题的人来说，这种方法对我来说很有效。还有关于 AxiosError: Request failed with status code 403 的相关讨论可能会提供更多见解。