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:

Has anyone tackled this or have any advice?

Recently found that in flask and other frameworks they explicitly have CORS packages... — Milap
– Milap, Commented Mar 27, 2024 at 7:11

Milap · Accepted Answer · 2024-02-15 18:18:56Z

2

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.

answered Feb 15, 2024 at 18:18

Milap

9110 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related