CORS middleware setup in FastAPI - Mini Project: Build & Apply

CORS middleware setup

📖 Scenario: You are building a simple FastAPI web application that will be accessed from different websites. To allow these websites to communicate with your API safely, you need to set up CORS (Cross-Origin Resource Sharing) middleware.

🎯 Goal: Set up CORS middleware in a FastAPI app to allow requests from specific origins.

📋 What You'll Learn

Create a FastAPI app instance

Define a list of allowed origins

Add CORS middleware to the app with the allowed origins

Configure the middleware to allow all methods and headers

💡 Why This Matters

🌍 Real World

Many web APIs need to allow requests from web pages hosted on different domains. Setting up CORS middleware correctly lets your API communicate safely with these web clients.

💼 Career

Understanding and configuring CORS is essential for backend developers working with web APIs to ensure secure and functional cross-origin requests.

1

Create a FastAPI app instance

Import FastAPI from fastapi and create a variable called app that is an instance of FastAPI().

FastAPI

# Import FastAPI and create app instance
# Your code here

Need a hint?

Use from fastapi import FastAPI and then app = FastAPI().

2

Define allowed origins list

Create a list called origins with these exact strings: "http://localhost" and "http://localhost:3000".

FastAPI

from fastapi import FastAPI

app = FastAPI()

# Define allowed origins list
# Your code here

Need a hint?

Make a list named origins with the two URLs as strings.

3

Add CORS middleware to the app

Import CORSMiddleware from fastapi.middleware.cors. Then add CORS middleware to app using app.add_middleware with these arguments: allow_origins=origins, allow_credentials=True, allow_methods=["*"], and allow_headers=["*"].

FastAPI

from fastapi import FastAPI

app = FastAPI()

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

# Import CORSMiddleware and add it to app
# Your code here

Need a hint?

Use app.add_middleware with CORSMiddleware and set the parameters exactly as described.

4

Complete the FastAPI app with a root path

Add a root path operation to app using @app.get("/") that returns a dictionary with {"message": "Hello World"}.

FastAPI

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

app = FastAPI()

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

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

# Add a root path that returns {"message": "Hello World"}
# Your code here

Need a hint?

Use @app.get("/") decorator and define an async function root that returns the dictionary.