Zum Inhalt

CORS (Cross-Origin Resource Sharing)

CORS oder „Cross-Origin Resource Sharing“ bezieht sich auf Situationen, in denen ein Frontend, das in einem Browser lĂ€uft, JavaScript-Code enthĂ€lt, der mit einem Backend kommuniziert, und das Backend sich in einem anderen „Origin“ als das Frontend befindet.

Origin

Ein Origin ist die Kombination aus Protokoll (http, https), Domain (myapp.com, localhost, localhost.tiangolo.com) und Port (80, 443, 8080).

Alle folgenden sind also unterschiedliche Origins:

  • http://localhost
  • https://localhost
  • http://localhost:8080

Auch wenn sie alle in localhost sind, verwenden sie unterschiedliche Protokolle oder Ports, daher sind sie unterschiedliche „Origins“.

Schritte

Angenommen, Sie haben ein Frontend, das in Ihrem Browser unter http://localhost:8080 lÀuft, und dessen JavaScript versucht, mit einem Backend zu kommunizieren, das unter http://localhost lÀuft (da wir keinen Port angegeben haben, geht der Browser vom Default-Port 80 aus).

Dann wird der Browser ein HTTP-OPTIONS-Request an das :80-Backend senden, und wenn das Backend die entsprechenden Header sendet, die die Kommunikation von diesem anderen Origin (http://localhost:8080) autorisieren, lÀsst der :8080-Browser das JavaScript im Frontend seinen Request an das :80-Backend senden.

Um dies zu erreichen, muss das :80-Backend eine Liste von „erlaubten Origins“ haben.

In diesem Fall mĂŒsste die Liste http://localhost:8080 enthalten, damit das :8080-Frontend korrekt funktioniert.

Wildcards

Es ist auch möglich, die Liste als "*" (ein „Wildcard“) zu deklarieren, um anzuzeigen, dass alle erlaubt sind.

Aber das erlaubt nur bestimmte Arten der Kommunikation und schließt alles aus, was Anmeldeinformationen beinhaltet: Cookies, Autorisierungsheader wie die, die mit Bearer Tokens verwendet werden, usw.

Um sicherzustellen, dass alles korrekt funktioniert, ist es besser, die erlaubten Origins explizit anzugeben.

CORSMiddleware verwenden

Sie können das in Ihrer FastAPI-Anwendung mit der CORSMiddleware konfigurieren.

  • Importieren Sie CORSMiddleware.
  • Erstellen Sie eine Liste der erlaubten Origins (als Strings).
  • FĂŒgen Sie es als „Middleware“ zu Ihrer FastAPI-Anwendung hinzu.

Sie können auch angeben, ob Ihr Backend erlaubt:

  • Anmeldeinformationen (Autorisierungsheader, Cookies, usw.).
  • Bestimmte HTTP-Methoden (POST, PUT) oder alle mit der Wildcard "*".
  • Bestimmte HTTP-Header oder alle mit der Wildcard "*".
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

origins = [
    "http://localhost.tiangolo.com",
    "https://localhost.tiangolo.com",
    "http://localhost",
    "http://localhost:8080",
]

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


@app.get("/")
async def main():
    return {"message": "Hello World"}

Die von der CORSMiddleware-Implementierung verwendeten Defaultparameter sind standardmĂ€ĂŸig restriktiv, daher mĂŒssen Sie bestimmte Origins, Methoden oder Header ausdrĂŒcklich aktivieren, damit Browser sie in einem Cross-Domain-Kontext verwenden dĂŒrfen.

Die folgenden Argumente werden unterstĂŒtzt:

  • allow_origins – Eine Liste von Origins, die Cross-Origin-Requests machen dĂŒrfen. z. B. ['https://example.org', 'https://www.example.org']. Sie können ['*'] verwenden, um jedes Origin zuzulassen.
  • allow_origin_regex – Ein Regex-String zum Abgleichen gegen Origins, die Cross-Origin-Requests machen dĂŒrfen. z. B. 'https://.*\.example\.org'.
  • allow_methods – Eine Liste von HTTP-Methoden, die fĂŒr Cross-Origin-Requests erlaubt sein sollen. StandardmĂ€ĂŸig ['GET']. Sie können ['*'] verwenden, um alle Standardmethoden zu erlauben.
  • allow_headers – Eine Liste von HTTP-Requestheadern, die fĂŒr Cross-Origin-Requests unterstĂŒtzt werden sollten. StandardmĂ€ĂŸig []. Sie können ['*'] verwenden, um alle Header zu erlauben. Die Header Accept, Accept-Language, Content-Language und Content-Type sind immer fĂŒr einfache CORS-Requests erlaubt.

  • allow_credentials – Anzeigen, dass Cookies fĂŒr Cross-Origin-Requests unterstĂŒtzt werden sollten. StandardmĂ€ĂŸig False.

    Keines der allow_origins, allow_methods und allow_headers kann auf ['*'] gesetzt werden, wenn allow_credentials auf True gesetzt ist. Alle mĂŒssen explizit angegeben werden.

  • expose_headers – Angabe der Responseheader, auf die der Browser zugreifen können soll. StandardmĂ€ĂŸig [].

  • max_age – Legt eine maximale Zeit in Sekunden fest, die Browser CORS-Responses zwischenspeichern dĂŒrfen. StandardmĂ€ĂŸig 600.

Die Middleware antwortet auf zwei besondere Arten von HTTP-Requests ...

CORS-Preflight-Requests

Dies sind alle OPTIONS-Requests mit Origin- und Access-Control-Request-Method-Headern.

In diesem Fall wird die Middleware den eingehenden Request abfangen und mit entsprechenden CORS-Headern, und entweder einer 200- oder 400-Response zu Informationszwecken antworten.

Einfache Requests

Jeder Request mit einem Origin-Header. In diesem Fall wird die Middleware den Request wie gewohnt durchlassen, aber entsprechende CORS-Header in die Response aufnehmen.

Weitere Informationen

Weitere Informationen zu CORS finden Sie in der Mozilla CORS-Dokumentation.

Technische Details

Sie könnten auch from starlette.middleware.cors import CORSMiddleware verwenden.

FastAPI bietet mehrere Middlewares in fastapi.middleware nur als Komfort fĂŒr Sie, den Entwickler. Aber die meisten der verfĂŒgbaren Middlewares stammen direkt von Starlette.