CORS issues when running a dockerised FastAPI application

Question

I have a fastapi application running and working just fine. I want to use my fastapi application to serve as backend for my react frontend deployed on firebase hosting (https). Running locally (http fastpi and react) I got it working by enabling CORS in FastAPI

from starlette.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

But when I deployed I realized that I couldn't serve fastapi as HTTP since my frontend is on HTTPS. I went ahead and created a kubernetes cluster in Google Cloud and ingressed my dockerised fastapi application (exposed as HTTPS). That works when I curl to my HTTPS fastapi endpoint but I'm getting CORS issues again in my react app and this time I don't know how to solve it. How come the above doesn't apply any longer?

The CORS error is

Access to fetch at 'https://my-api-domain' from origin 'https://my-frontend-domain' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.

EDIT

I just did some further investigation and I can conclude that if I run my container locally with docker run then access-control-allow-origin is properly returned in the header. But when deployed on GKE then there are no access-control-allow-origin.

UPDATE

I've tried installing nginx ingress instead of GKE ingress but that complicates things regardin global static IP and google managed certificate. I need a solution that gives me

Global static IP (ok with GKE ingress)
Google Managed Certificate (ok with GKE ingress)
CORS enabled (ok with nginx ingress)

So I'm stuck atm!

LATEST UPDATE

I'm using Nginx Ingress Controller with cert-manager and it works like a charm. Bonus info: running everything with skaffold and kustomize as well - so many great tools

What are the exact error messages that the browser is logging in the devtools console? — sideshowbarker, Mar 14 '20 at 08:08
@sideshowbarker I’ve supplied the original post with the error — mr.bjerre, Mar 14 '20 at 10:01
Have you checked this thread? [How to enable CORS in GKE ingress](https://stackoverflow.com/questions/48190429/how-to-enable-cors-in-gke-with-ingress) — Dawid Kruk, Mar 17 '20 at 09:58
Yes that uses nginx ingress instead. And I can’t use Google Managed Certificates with nginx ingress which is a requirement — mr.bjerre, Mar 17 '20 at 20:59
Is there any particular reason that the google managed certificate is a requirement? Couldn't this be done for example with `cert-manager` inside of gke cluster? Please take a look here: [Github.com: How to assign a static-ip to an Ingress on through the Nginx controller](https://github.com/kubernetes/ingress-nginx/tree/master/docs/examples/static-ip). If it came to conclusion that `cert-manager` could be used, the nginx ingress should satisfy all the requirements. — Dawid Kruk, Mar 18 '20 at 08:45
@mr.bjerre Does combination `Nginx Ingress Controller` with `Cert-Manager` resolved your issue? — PjoterS, Jan 11 '21 at 08:54

score 4 · Answer 1 · answered Jan 19 '21 at 09:28

4

Adding the middleware after the default endpoint solved the issue for me.

app = FastAPI()
@app.get("/")

def home():
return {"message":"Health Check Passed!"}

app.add_middleware(CORSMiddleware,
allow_origins=["*"],
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],)

answered Jan 19 '21 at 09:28

Amar Alikadic

67
1
5

howw??? its works like a charm ! but how can you please explain ? – Ankit Parmar Nov 20 '21 at 18:01
Unbelievable, it worked. can you explain. I've been on this for hours. – blockhead Mar 12 '22 at 10:20
If this works, then it's a really strange bug in FastAPI... – oz123 Sep 11 '22 at 13:55
2

would have been too nice, didn't work for me – Olli Oct 10 '22 at 18:09

score 3 · Accepted Answer · answered Jan 12 '21 at 14:18

Posting this Community Wiki for better visibility as solution was mention in comment section.

If you would like to use CORS on Google Cloud Platform, you have to use Nginx Ingress and specific GCP annotation. More details about this you can find in this SO thread

kubernetes.io/ingress.class: "nginx"
nginx.ingress.kubernetes.io/enable-cors: "true"

Solution

Solution for this issue was to use Nginx Ingress Controller and Cert-Manager with proper annotations.

Also OP confirmed it's working.

I'm using Nginx Ingress Controller with cert-manager and it works like a charm. Bonus info: running everything with skaffold and kustomize as well - so many great tools

CORS issues when running a dockerised FastAPI application

EDIT

UPDATE

LATEST UPDATE

2 Answers2

Linked