CORS and Vite Proxy — Connecting Dev Environments

When the React dev server on port 5173 makes a request to FastAPI on port 8000, the browser applies the Same-Origin Policy and blocks the response unless FastAPI includes the correct Access-Control-Allow-Origin header. This is CORS (Cross-Origin Resource Sharing). There are two solutions: configure FastAPI to send CORS headers (needed in production), or configure Vite to proxy API requests through its own server (convenient in development — the browser sees one origin). Both are often used together.

FastAPI CORS Configuration #

# app/main.py
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI(title="Blog API")

# ── CORS middleware ─────────────────────────────────────────────────────────────
app.add_middleware(
    CORSMiddleware,
    # Development: allow the React Vite dev server
    # Production: allow your actual frontend domain(s)
    allow_origins=[
        "http://localhost:5173",        # Vite dev server
        "http://localhost:3000",        # Create React App (if used)
        "https://blog.example.com",     # production domain
    ],
    allow_credentials = True,           # allow cookies and auth headers
    allow_methods     = ["*"],          # GET, POST, PATCH, DELETE, etc.
    allow_headers     = ["*"],          # Authorization, Content-Type, etc.
)

Vite Proxy Configuration #

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path  from "path";

export default defineConfig({
    plugins: [react()],
    resolve: {
        alias: { "@": path.resolve(__dirname, "src") },
    },
    server: {
        port: 5173,
        proxy: {
            // Any request to /api/* is forwarded to FastAPI
            "/api": {
                target:       "http://localhost:8000",
                changeOrigin: true,
                // If FastAPI routes don't have /api prefix, rewrite:
                // rewrite: (path) => path.replace(/^\/api/, ""),
            },
            // Forward static file requests (uploaded images, etc.)
            "/uploads": {
                target:       "http://localhost:8000",
                changeOrigin: true,
            },
        },
    },
});

How the Proxy Works #

Without proxy (CORS error):
  Browser fetches http://localhost:5173/api/posts
  → Browser sends request to http://localhost:8000/api/posts  ← CROSS-ORIGIN
  → FastAPI returns response WITHOUT CORS headers (if not configured)
  → Browser BLOCKS the response with CORS error

With Vite proxy:
  Browser fetches http://localhost:5173/api/posts
  → Vite dev server (same origin!) intercepts the request
  → Vite server-side forwards to http://localhost:8000/api/posts
  → FastAPI responds to Vite (server-to-server, no CORS check)
  → Vite returns the response to the browser as if from localhost:5173
  → Browser sees ONE origin (localhost:5173) — no CORS issue!

Which Approach to Use #

Common Mistakes #

Mistake 1 — allow_origins=[“*”] with allow_credentials=True #

❌ Wrong — FastAPI raises a ValueError at startup:

CORSMiddleware(allow_origins=["*"], allow_credentials=True)
# ValueError: Cannot use allow_credentials=True with wildcard origins

✅ Correct — list specific origins when credentials are needed.

Mistake 2 — Forgetting the Vite proxy and hardcoding localhost:8000 #

❌ Wrong — hardcoded URL fails in production:

axios.create({ baseURL: "http://localhost:8000/api" });   // breaks in production!

✅ Correct — use a relative URL (/api) that the proxy or Nginx handles:

axios.create({ baseURL: "/api" });   // ✓ works with Vite proxy in dev, Nginx in prod

Quick Reference #