How can I enable CORS in FastAPI?

Question

I'm trying to enable CORS in this very basic FastAPI example, however it doesn't seem to be working.

    from fastapi import FastAPI
    from fastapi.middleware.cors import CORSMiddleware
    
    
    app = FastAPI()
    
    app.add_middleware(
        CORSMiddleware,
        allow_origins=['*']
    )
    
    @app.get('/')
    def read_main():
        return {'message': 'Hello World!'}

This is the response I get:

curl -v http://127.0.0.1:8000
*   Trying 127.0.0.1...
* TCP_NODELAY set
* Connected to 127.0.0.1 (127.0.0.1) port 8000 (#0)
> GET / HTTP/1.1
> Host: 127.0.0.1:8000
> User-Agent: curl/7.64.1
> Accept: */*
>
< HTTP/1.1 200 OK
< date: Fri, 08 Jan 2021 19:27:37 GMT
< server: uvicorn
< content-length: 26
< content-type: application/json
<
* Connection #0 to host 127.0.0.1 left intact
{"message":"Hello World!"}*

Answer 1

you can find answer from this:fastapi cors

then this is a very simple code to achieve it:

1. create a python file and named it main.py.

2. add code in this file.

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

origins = ["*"]

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


@app.get("/")
async def main():
    return {"message": "Hello World"}

and run this app:

uvicorn main:app  --reload --host 0.0.0.0 --port 8000

if you computer ip is 192.12.12.12

you can check this link and just write a small javascript in html:

<script>
        fetch("http://192.12.12.12:8000/").then((Response) => {
            return Response.json()
        }).then((data) => {
            console.log(data);
        })
    </script>

Answer 2

CORS or "Cross-Origin Resource Sharing" refers to the situations when a frontend running in a browser has JavaScript code that communicates with a backend, and the backend is in a different "origin" than the frontend.

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

origins = [
    "http://domainname.com",
    "https://domainname.com",
    "http://localhost",
    "http://localhost:8080",
]

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

Know more

Answer 3

In my case, CORS not works when pydantic or type problems occured.

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

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

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

# works well!
@app.get("/list")
async def main():
    return ["hi", "hello"]

# error cases
from typing import List
from app.nosql.model import Book

@app.get("/error")
async def main():
    # case 1
    ret = mongo_db.engine.find(Book, limit=10) # keyword "await" missing
    return ret  # CORS 500 error
    # case 2
    ret: List[Book] = await mongo_db.engine.find(Book, limit=10) # data was not fit with model Book
    return ret # CORS error
    # case 3
    return ["hi", "hello"] # works well...

Whats the server-side error says? It might be error occurs in server. How about test with new function. (has no error) If server works well.. humm.. sry about that.