CORS: Cross-Origin Resource Sharing#

CORS (Cross-Origin Resource Sharing) is a security mechanism that controls how web browsers handle requests between different origins (domains, protocols, or ports). Data scientists need CORS for APIs serving data or analysis to a browser on a different domain.

Watch this practical explanation of CORS (3 min):

CORS in 100 Seconds

Key CORS concepts:

  • Same-Origin Policy: Browsers block requests between different origins by default
  • CORS Headers: Server responses must include specific headers to allow cross-origin requests
  • Preflight Requests: Browsers send OPTIONS requests to check if the actual request is allowed
  • Credentials: Special handling required for requests with cookies or authentication

If you’re exposing your API with a GET request publicly, the only thing you need to do is set the HTTP header Access-Control-Allow-Origin: *.

Here are other common CORS headers:

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true

To implement CORS in FastAPI, use the CORSMiddleware middleware:

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

app = FastAPI()

app.add_middleware(CORSMiddleware, allow_origins=["*"])  # Allow GET requests from all origins
# Or, provide more granular control:
app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://example.com"],  # Allow a specific domain
    allow_credentials=True,  # Allow cookies
    allow_methods=["GET", "POST", "PUT", "DELETE"],  # Allow specific methods
    allow_headers=["*"],  # Allow all headers
)

Testing CORS with JavaScript:

// Simple GET request (no custom headers)
const response = await fetch("https://api.example.com/data");

// Request with credentials (requires explicit origin on server)
const response = await fetch("https://api.example.com/data", {
  credentials: "include",
});

Useful CORS debugging tools:

  • CORS Checker: Test CORS configurations
  • Browser DevTools Network tab: Inspect CORS headers and preflight requests
  • cors-anywhere: CORS proxy for development

Common CORS errors and solutions:

  • No 'Access-Control-Allow-Origin' header: Configure server to send proper CORS headers
  • Request header field not allowed: Add required headers to Access-Control-Allow-Headers
  • Credentials flag: Set both credentials: 'include' and Access-Control-Allow-Credentials: true
  • Wild card error: Cannot use * with credentials; specify exact origins