markdown_files/CORS.md

metadata

title: CORS
original_url: https://tds.s-anand.net/#/cors?id=cors-cross-origin-resource-sharing
downloaded_at: '2025-06-08T23:26:45.742238'

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):

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: trueCopy to clipboardErrorCopied

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
)Copy to clipboardErrorCopied

Testing CORS with JavaScript:

// Simple request
const response = await fetch("https://api.example.com/data", {
  method: "GET",
  headers: { "Content-Type": "application/json" },
});

// Request with credentials
const response = await fetch("https://api.example.com/data", {
  credentials: "include",
  headers: { "Content-Type": "application/json" },
});Copy to clipboardErrorCopied

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

[Previous

Tunneling: ngrok](#/ngrok)

[Next

REST APIs](#/rest-apis)