CORS header ‘Access-Control-Allow-Origin’ missing but its mentioned in FastAPI backend

[Gaurav0502]

First Check

• I added a very descriptive title here.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the FastAPI documentation, with the integrated search.
• I already searched in Google "How to X in FastAPI" and didn't find any information.
• I already read and followed all the tutorial in the docs and didn't find an answer.
• I already checked if it is not related to FastAPI but to Pydantic.
• I already checked if it is not related to FastAPI but to Swagger UI.
• I already checked if it is not related to FastAPI but to ReDoc.

Commit to Help

• I commit to help with one of those options 👆

Example Code

app = FastAPI()

origins = [
    "http://127.0.0.1:5500"
]

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

@app.get("/", tags=["ROOT"])
async def root() -> dict:
    return {"status": "OK"}

class Content(BaseModel):
    src_lang: str = ""
    dest_lang: str = ""
    sents: list = []

@app.post("/translate")
async def translate(content: Content):
    print(content.dest_lang, content.src_lang, content.sents)
    translator = Translator(content.src_lang, content.dest_lang, content.sents)
    response = translator.translate_sents()
    return response

javascript api fetch function:

async function myfunc(){
    const text_content = getText();
    content = {
        "src_lang": "hi",
        "dest_lang": "en",
        "sents": [text_content]
    }

    return fetch("http://127.0.0.1:8081/translate", {
        method: "POST",
        mode: "cors",
        headers: {
            'content-type': 'application/json'
        },
        body: JSON.stringify({"data": content})
    })
    .then(res => res.json())
    .catch(err => console.log(err))
}

Description

Operating System

Linux

Operating System Details

No response

FastAPI Version

0.104.1

Pydantic Version

2.4.2

Python Version

3.8.10

Additional Context

Here, 127.0.0.1/5500 is the frontend and the 127.0.0.1/8081 is the API. I tested the API in Swagger UI and it worked as expected.

[MarceloGouveia77]

same here