Backend Returns "Access-Control-Allow-Origin" Header Twice, Each With Different Value

Question

I'm using Python's FastAPI to manage the server's API and Axios hooks on my Frontend.

Here's my code snippet that handles details of the CORS policy on the server:

origins = ["http://localhost:3000"]

 *****some code here*****

app = FastAPI(
        title=settings.PROJECT_NAME,
        version="1.0",
        docs_url=f"{settings.API_V1_STR}/docs",
        openapi_url=f"{settings.API_V1_STR}/openapi.json",
    )

app.container = app

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

app.include_router(api_router, prefix=settings.API_V1_STR)

Here's the relevant hook that I'm using on the Frontend via Axios-hooks axios-hooks docs :

const [
    {
        response: marketResponse,
        loading: marketLoading,
        error: marketError,
    },
] = useAxios({
    url: serverURL("market/list"),
    method: "GET",
});

It's important to note that I've double checked the allowed origin.

The issue:

As my web app requests the list via above mentioned axios hoook, the following error appears:

Frontend HTTP Error

Here's the Network Tab's Header Info:

Network's Header Info

As you'll notice Access-Control-Allow-Origin appears there 2x. Once in capped init letter and 2nd time in all lower case. I figured the issue somehow stems from this headers. Unfortunatelly can't find a particular way to fix it.

Thanks for any kind of help!

Googled multiple similiar issues and studied both Axios & Fast Api docs. Unfortunately couldn't find even a slight hint of solution.

Answer 1

The issue

This is actually a known issue with the Starlette CORSMiddleware . So the issue is that Starlette CORSMiddleware adds the origin header without checking if it already exists. That is by design.

FastAPI is wrapping this module.

If you take a look at the actual Starlette code you will see that it is going to this line .

This explains the upper case version of Access-Control-Allow-Origin .

So why is this happening?

Multiple servers are running. A known issue is if you are using python-socketio then the socketio will add its own version of the header.

I noticed this line:

app.container = app

What is the reason for this? Can you try to comment it out and rerun the code?

Else check if your NGINX is setting CORS.