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?
- 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:
components.iframe()will not occur CORS error but
- how can I do what I want to do with Streamlit.
Who can help me? Thank you very much.