How to Configure CORS for a Streamlit App on Heroku When Embedded in an Iframe?

Question

I'm embedding a Streamlit app hosted on Heroku in an iframe in my Next.js app. The Streamlit app has a CSV upload feature, which works fine when accessed directly but throws a

AxiosError: Request failed with status code 403

when used through the iframe (in another domain).

This seems to be a CORS issue. I'm looking for guidance on how to configure CORS on Heroku to allow requests from my Next.js app's domain.

I checked these topics without luck:

• File Uploader 403 Error When Embedding Streamlit App in Iframe
• Embedded Streamlit App as Iframe: XMLHttpRequest and CORS Errors
• Issue with Receiving postMessage Events in a Streamlit App Embedded in a Next.js Iframe

Has anyone tackled this or have any advice?

Answer 1

I managed to solve the CORS issue by adjusting the setup.sh script. I had only set enableCORS = false, but you must disable XSRF protection also. Here's the updated setup.sh file that solved the problem:

mkdir -p ~/.streamlit/

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

By setting both enableXsrfProtection and enableCORS to false, I eliminated the upload issue. Please note that disabling these features might have implications for your application's security.

For anyone facing similar issues, this approach was effective for me. There's also a related discussion on AxiosError: Request failed with status code 403 that might provide additional insights.