CORS Fastapi Problem in dockerized deployment to Digital Ocean - docker

Question

I have deployed my first webapp at a digital ocean droplet.
The app has two docker containers running at :8000 and :5173
It has a frontend and a backend.
Originally I thought Cors is not enabled.
However after more research I think the issue lies with Fastapi as I've found other threads with similar problems.
Unfortunately none worked. There is talk on github and SO that fastapi and docker is the problem, but it works fine on my local machine. (in the container).
I tried these, this and pretty much everything I could find.
The error message is:
Access to fetch at 'http://<IP address>:8000/mdstats_player' from origin 'http://<IP address>:5173' 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.
GET http://<ip_address>/mdstats_player net::ERR_FAILED 200
In Fastapi I set up the allowed origins including that new IP address.
Exactly like https://fastapi.tiangolo.com/tutorial/cors/ and it works locally originally getting the same error.
I also tried the wildcard and starlette.
I can access http://<ip_address>:8000 just fine.The container is running as expected.
On my local machine everything works as expected too. (i.e. backend and frontend containers can communicate).
The origins I set, (where ipaddress is my Digital Ocean IP address), the exact same one that gets denied, I think I have all variations, but maybe I am missing one?
origins = [
"http://localhost:5173",
"localhost:5173",
"http://<ip_address>:5173",
"<ip_address>:5173",
"http://<ip_address>:5173/",
"localhost:5173/",
"0.0.0.0:5173",
"http://172.18.0.2:5173/",
]
As a last chance:
I am also using svelte with vite.
In my docker-compose file I set:
- VITE_BACKEND_URL=http://<ip_address>:8000
original set to localhost
Many thanks in advance.

Answer 1

After trying pretty much everything I have found a solution:
instead of adding the middleware afterwards like they do on the fastapi tutorial
I did this:
from fastapi.middleware.cors import CORSMiddleware
from fastapi.middleware import Middleware
app = FastAPI(middleware=middleware)
origins = [
"http://localhost:5173",
"http://localhost:5173/",
"localhost:5173",
"localhost:5173/",
"0.0.0.0:5173",
"http://172.18.0.2:5173/",
"http://192.168.64.2:5173/",
]
middleware = [
Middleware(
CORSMiddleware,
allow_origins=origins,
allow_credentials=True,
allow_methods=['*'],
allow_headers=['*']
)
]
I also had to add the network ips.
But the middleware part was crucial. Even with the network ips with app.add_middle_ware this won't work. I tried several times just to make sure that really is the solution since it seems like a lot of the other posts that come across have solutions that were just along the way since docker doesn't update everything each system update. See issues of docker on github.
Hope this helps someone. What insanity.