Handle CORS in Express, Flask and Spring Boot

Overview

Cross-Origin Resource Sharing (CORS) is what the browser consults before it lets one origin read another origin’s responses. Misconfigured CORS is one of the most common sources of frontend-backend friction and of real security holes. What follows configures CORS middleware properly (allowlist validation, preflight handling, credentials and explicit method/header declarations) in Python, JavaScript and Java.

When to Use

Use this resource when:

• Your frontend (an SPA, mobile app or third-party widget) runs on a different origin than your API
• You need to support authenticated cross-origin requests with cookies or authorization headers
• You’re building a public API consumed by external domains
• You’re chasing a cryptic “blocked by CORS policy” error in the browser console

Solution

Runnable versions of these examples, plus a curl script that verifies the headers, live in the companion repository.

Python (Flask)

from flask import Flask, request, make_response
from urllib.parse import urlparse

app = Flask(__name__)

ALLOWED_ORIGINS = {
    "https://app.example.com",
    "https://admin.example.com",
    "http://localhost:3000",
}
ALLOWED_METHODS = ["GET", "POST", "PUT", "DELETE", "PATCH"]
ALLOWED_HEADERS = ["Content-Type", "Authorization", "X-Request-ID"]
ALLOW_CREDENTIALS = True

@app.after_request
def add_cors_headers(response):
    origin = request.headers.get("Origin")

    # Only reflect allowed origins; never use "*" with credentials
    if origin in ALLOWED_ORIGINS:
        response.headers["Access-Control-Allow-Origin"] = origin
        response.headers["Vary"] = "Origin"

    if ALLOW_CREDENTIALS:
        response.headers["Access-Control-Allow-Credentials"] = "true"

    return response

@app.route("/api/<path:path>", methods=["OPTIONS"])
def handle_preflight(path):
    origin = request.headers.get("Origin")
    if origin not in ALLOWED_ORIGINS:
        return make_response(("", 204))  # No CORS headers for disallowed origins

    response = make_response(("", 204))
    response.headers["Access-Control-Allow-Origin"] = origin
    response.headers["Access-Control-Allow-Methods"] = ", ".join(ALLOWED_METHODS)
    response.headers["Access-Control-Allow-Headers"] = ", ".join(ALLOWED_HEADERS)
    response.headers["Access-Control-Allow-Credentials"] = "true"
    response.headers["Access-Control-Max-Age"] = "86400"
    return response

JavaScript (Express)

import express from "express";

const app = express();

const ALLOWED_ORIGINS = new Set([
  "https://app.example.com",
  "https://admin.example.com",
  "http://localhost:3000",
]);

function corsMiddleware(req, res, next) {
  const origin = req.headers.origin;

  if (origin && ALLOWED_ORIGINS.has(origin)) {
    res.header("Access-Control-Allow-Origin", origin);
    res.header("Vary", "Origin");
  }

  res.header("Access-Control-Allow-Credentials", "true");

  // Preflight request
  if (req.method === "OPTIONS") {
    if (origin && !ALLOWED_ORIGINS.has(origin)) {
      return res.sendStatus(204);
    }
    res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, PATCH");
    res.header("Access-Control-Allow-Headers", "Content-Type, Authorization, X-Request-ID");
    res.header("Access-Control-Max-Age", "86400");
    return res.sendStatus(204);
  }

  next();
}

app.use(corsMiddleware);
app.use(express.json());

// Alternative: using cors package with explicit allowlist
// import cors from "cors";
// app.use(cors({
//   origin: (origin, callback) => {
//     if (!origin || ALLOWED_ORIGINS.has(origin)) {
//       callback(null, true);
//     } else {
//       callback(new Error("Not allowed by CORS"));
//     }
//   },
//   credentials: true,
//   methods: ["GET", "POST", "PUT", "DELETE", "PATCH"],
//   allowedHeaders: ["Content-Type", "Authorization", "X-Request-ID"],
// }));

Java (Spring Boot)

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig {

  private static final String[] ALLOWED_ORIGINS = {
    "https://app.example.com",
    "https://admin.example.com",
    "http://localhost:3000"
  };

  @Bean
  public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurer() {
      @Override
      public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
          .allowedOrigins(ALLOWED_ORIGINS)
          .allowedMethods("GET", "POST", "PUT", "DELETE", "PATCH")
          .allowedHeaders("Content-Type", "Authorization", "X-Request-ID")
          .allowCredentials(true)
          .maxAge(86400);
      }
    };
  }
}

// Spring Security integration (if using SecurityFilterChain)
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.web.SecurityFilterChain;

@Configuration
public class SecurityConfig {

  @Bean
  public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
    http.cors(cors -> {})
        .csrf(csrf -> csrf.disable()) // only if API is stateless with tokens
        .authorizeHttpRequests(auth -> auth
          .requestMatchers("/api/**").authenticated()
          .anyRequest().permitAll()
        );
    // For auth patterns, see the API Security Checklist guide on StackPractices.
    return http.build();
  }
}

Explanation

• Same-Origin Policy: browsers block requests from origin-a.com to origin-b.com by default, and CORS is the controlled way to relax that policy.
• Preflight (OPTIONS): browsers send a preflight request for non-simple methods (PUT, DELETE, PATCH) and custom headers; the server has to answer with the allowed origins, methods and headers.
• Access-Control-Allow-Origin wants a literal origin (https://app.example.com), and the only available shortcut is *. Never combine * with Access-Control-Allow-Credentials: true, because browsers reject that combination outright.
• Reach for Vary: Origin whenever the CORS headers depend on who asked. Without it, a CDN can cache a response stamped with one origin and serve it to requests from another.
• Access-Control-Allow-Credentials is the switch that lets cookies and Authorization headers travel cross-origin. Both client (withCredentials: true / credentials: 'include') and server must opt in.

In sequence, the exchange looks like this:

A preflight only happens for non-simple requests. Plain GETs with standard headers skip it and go straight to the actual call.

Variants

Approach	Configuration	Best For
Allowlist	Explicit origin list	Production APIs with known consumers
Regex pattern	*.example.com	Subdomain wildcards (validate carefully)
Live origin	Origin validated at runtime	Multi-tenant APIs with per-tenant origins
* wildcard	No origin restriction	Public read-only APIs without credentials
Proxy	Frontend proxy to API	Development, same-origin deployment

What Works

1. Never use * with credentials: browsers reject Access-Control-Allow-Origin: * the moment Allow-Credentials: true is present, so reflect the requesting origin instead, after checking it against your allowlist.
2. Validate origins explicitly: an allowlist holds exact matches, nothing fuzzier. Loose regexes are risky here: a sloppy *.example.com check also accepts attacker-example.com.
3. Set Vary: Origin: without it, a shared cache will happily serve a response stamped for domain A to a request from domain B.
4. Keep preflight max-age reasonable: 86400 seconds (one day) is a typical value: much longer and policy changes take a day to propagate, much shorter and you waste preflight requests.
5. Restrict allowed methods and headers: declare only what the API actually supports, since an over-permissive policy just widens the attack surface.

Common Mistakes

1. Setting Access-Control-Allow-Origin: * and wondering why cookies don’t work cross-origin.
2. Reflecting the request Origin header without validation, allowing any website to call your API.
3. Forgetting to handle the OPTIONS preflight, causing browser CORS errors on PUT/DELETE requests.
4. Not setting Vary: Origin, which lets a CDN cache one origin’s response and serve it to another.
5. Turning allowCredentials on for a public API without origin validation, which exposes your authenticated endpoints to any malicious site. See API Security Checklist for origin validation.

Troubleshooting

• Preflight returns 204 but the browser still blocks the call: a bare 204 fails the preflight unless the OPTIONS response itself carries the Access-Control-Allow-* headers.
• Access-Control-Allow-Origin doesn’t match: an origin is scheme + host + port, so https://www.app.com and https://app.com are different, and so is http vs https. Log the incoming Origin header and compare it byte-for-byte against the allowlist.
• CDN serves another origin’s response: without Vary: Origin, a shared cache can serve a response stamped for origin A to a request from origin B. For dynamic origin validation, also set Cache-Control: no-store on preflight responses.
• File uploads blocked: a multipart/form-data post triggers preflight, so it fails unless POST sits in Access-Control-Allow-Methods and Content-Type in Access-Control-Allow-Headers. For presigned S3 uploads, the bucket needs its own CORS rule, because the request never reaches your server.
• SSE or WebSocket connections fail: EventSource can’t send custom headers, so authenticate with cookies plus withCredentials or a token in the query string. WebSockets skip CORS entirely; validate the Origin header during the handshake instead.
• OAuth token exchange blocked: redirects don’t hit CORS, but the fetch call that swaps an authorization code for a token does. The provider’s token endpoint must return Access-Control-Allow-Origin for your domain (Google and GitHub allow all origins; a self-hosted provider needs configuring).

See Also

• MDN: Cross-Origin Resource Sharing: the reference walkthrough of simple vs preflighted requests.
• MDN: Access-Control-Allow-Origin: exact header semantics, including why * breaks with credentials.
• expressjs/cors middleware: the de facto Node package for this, with origin callbacks and credentials support.
• Spring CORS documentation: global and per-controller CORS configuration for Spring Boot.