CORS problem with components.html() and components.iframe()

🎈 Using Streamlit
1

I have a problem when I use streamlit to create app.

  • Streamlit, version 0.65.2
  • Python version: Python 3.7
  • Using Conda? PipEnv? pyenv? Pex?
    *Conda.
  • OS version: Windows 10 2004
  • Browser version: Microsoft Edge 85.0.564.44 (latest)

There is a react-app, I run it use npm start, now we can visit it use http://localhost:3000/.

Then I create a streamlit app, and use

components.iframe("http://localhost:3000/", width= 800, height=800, scrolling=True)

to embed the react-app to my streamlit app. But react-app is a responsive page, it’s so large to show in iframe, I want to reduce the overall page size to show it, just like using the desktop mode display in the mobile browser, but components.iframe() cannot do it.

However, I use

components.html(

       """

       <iframe src="http://localhost:3000/" width=600, height=800>

       </iframe>

       """,

       width=1000,

       height=800,

   )

to embed react-app to streamlit, and write some css to resize the whole webpage, now the style is ok, but some CORS ERROR occurred.

The react-app will get some json files from server, for example, from http://localhost:3000/ files.json and http://localhost:3000/data/example.json access to resources, but browser console show:

Access to fetch at 'http://localhost:3000/data/example.json" from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Then I use --server.enableCORS=false, it also doesn’t work.

components.iframe() can access resources but cannot resize webpage, while components.html() can resize webpage but cannot access resources.

So I have two questions:

  1. why components.iframe() will not occur CORS error but components.html() will.
  2. how can I do what I want to do with Streamlit.

Who can help me? Thank you very much.