0

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.

Olli
  • 906
  • 10
  • 25
  • What is the actual response when the browser tries to access the URL? (you should be able to see the response to the `OPTIONS` request, which should contain headers that indicate that the resource accepts a specific origin) – MatsLindh Oct 10 '22 at 19:40
  • 1
    I like to put an Nginx container in front that routes the requests based on the URL. I set it up so requests to `/api` go to the backend. That way the frontend and the backend have the same domain name and there are no CORS issues. – Hans Kilian Oct 10 '22 at 21:40
  • @MatsLindh I have it above, its GET 200 – Olli Oct 11 '22 at 07:07
  • @HansKilian thank you, I will try that, I read somewhere on one thread that it worked but I couldn't find it again with instructions. – Olli Oct 11 '22 at 07:09
  • @Olli I have a very minimal example project here that you can take a look at to get started: https://github.com/kodedylf/docker-node-nginx – Hans Kilian Oct 11 '22 at 07:17
  • @Olli No, the actual response - i.e. the one that shows what the headers are, not just the http status code. Start by looking at what the actual response for both the OPTIONS request and the later GET request is, and whether they have the correct (or any) Access-control-allow-origin header. This is the header that tells the browser that they can access the result of the request. – MatsLindh Oct 11 '22 at 08:54
  • 1
    @HansKilian thanks, i actually browsed your setup before posting this already. And I also got it running. I think the issue is with fastapi, I got it working yesterday, but it seems like even though pulling the docker images were cached and after overwriting what I thought was the fix I am back to square one. Now I am trying one by one again and hope to find it then I update. – Olli Oct 11 '22 at 16:15
  • @MatsLindh thanks, I hope I understand right, the actual response is what is expected the json file. I am sorry if I am a bit too newbie, I googled and wasn't still quite sure what you mean – Olli Oct 11 '22 at 16:17
  • @MatsLindh I think I found it, it says missing header. – Olli Oct 11 '22 at 16:22

1 Answers1

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.

Olli
  • 906
  • 10
  • 25