Handling CORS for Streamlit App on Heroku When Embedded in an Iframe

Using Streamlit
,
1

Hi everyone

I’m currently facing a challenge with my Streamlit app, which is hosted on Heroku. I’m trying to embed this app in an iframe within my Next.js application, hosted on a different domain. When I attempt to upload a CSV file through the Streamlit app in the iframe, I encounter a “AxiosError: Request failed with status code 403” error. However, uploading works fine when accessing the Streamlit app directly on its domain.

It seems to be a CORS issue, but I’m unsure how to properly configure CORS settings for a Streamlit app on Heroku to allow requests from my Next.js app’s domain.

Has anyone faced a similar issue or has any suggestions on how to configure CORS for this setup? I’m looking for the most straightforward approach that would allow my Streamlit app to accept file uploads when embedded in an iframe on another domain.

I checked these topics without luck:

2

I solved the CORS issue with my Streamlit app in an iframe by updating the setup.sh file. The full file now looks like this:

mkdir -p ~/.streamlit/

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

This turns off CORS and XSRF protection, which fixed the upload problem for me. Be aware that turning these off can affect your app’s security.

before i had only the enableCORS = false part.

A similar issue was discussed in AxiosError: Request failed with status code 403.

1 Like
3

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.