File uploader on azure webapp - 403 Axios Error

Deployment
,
1

Hi all,

i’ve built a streamlit chatbot that includes the file uploader. When running locally no problem occurs. When i deploy the code on an Azure Web App the chatbot runs fine, but when uploading a file to the file uploader i get the error 403 Axios error. In several forum posts the solution is to disable the XSRF protection. That is not allowed by our company security team. So i’m searching for a different solution. I came up with the streamlit doc: App is not loading when running remotely - Streamlit Docs
Under 3. they mention to use the browser.ServerAdress and browser.ServerPort. I use it the following way (added dummy url) in my run.sh file: python -m streamlit run test.py --server.port 8000 --server.address 0.0.0.0 --browser.serverAddress mywebsite.azurewebsites.net/ --browser.serverPort 443

Deployment works fine, ui is there, but again i get the error when uploading a file. In the developer console of the browser i saw that streamlit somehow adds a static “http://” in front of the browser.ServerAdress:

image
image1919×1033 114 KB

Anybody know a solution how to fix it without disabling the XSRF protection?

KR
Patrick

2 Likes
2

I have the same issue with the file_uploader and tried many differend browser.serverAddress and browser.serverPort combinations, as well as setting an environment variable STREAMLIT_SERVER_COOKIE_SECRET with a string, like recommended in the docs.
Unfortunately, nothing has worked so far, except disabling XSRF protection.
I am also on a single instance deployment, so there should be no other server involved anyway.

This thread unfortunately never was continued, and I don’t know if/how to affect the cookie @ennui mentioned.

1 Like
3

Thanks for sharing that you have the same problem. Still facing the issue. What we found out today that if the Azure Web App has no Azure SSO enabled there is no error.

4

I am affected, too. Unfortunately, Azure SSO is what I need to authenticate users to my app.

5

All the other posts on the forum seem to suggest to just turn off CORS and XSRF.
st.file_uploader with Azure Active Directory - error 403 [August 2023] - :rocket: Deployment - Streamlit
AxiosError: Request failed with status code 403 - :balloon: Using Streamlit - Streamlit
Isn’t there a better way?

6

@ snehankekre, may I pull you into this discussion? You left very useful advice here: When to use enableCORS and enableXsrfProtection parameters? - :balloon: Using Streamlit - Streamlit
However, I do not fully understand how to implement your solution. What object does self refer to in your case?
e.g. in your answer you describe self.set_header("Access-Control-Allow-Origin", "*"). I would replace the asterisk by my domain, but where do I find this self.set_header?

7

@marduk, may I ask you to comment my question as you have been on the cited thread, too.

8

Hi guys

Is there any solution to this topic yet? I am facing the same issue.

Regards

9

Not in my side. We went for building a proper frontend with vue.js

10

Just got bitten by Streamlit on this with the same issue during demo on a marketing event with 60+ Executives. The team immediately made decision to ditch Streamlit going forward afterwards, probably similar to the decision made by @Patrick_Schwarz
This is frustrating as it seems to happen as early as back in 2022 and it’s still happening, and the randomness of the occurrence is just not acceptable as a prod solution.
Word of advice for anyone deploying Streamlit app on an EC2 behind an Application Load Balancer: DO NOT associate your load balancer with Web Application Firewall. It seems to block requests sent from Streamlit client side such as file upload and return a 403 axios error.

1 Like