CORS（跨來源資源共用）¶

CORS 或「跨來源資源共用」是指前端在瀏覽器中運行，其 JavaScript 程式碼與後端通訊，而後端與前端位於不同「來源」的情況。

來源¶

來源是通訊協定 (http、https)、網域 (myapp.com、localhost、localhost.tiangolo.com) 和連接埠 (80、443、8080) 的組合。

因此，以下所有都是不同的來源

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

即使它們都在 localhost 上，但它們使用不同的通訊協定或連接埠，因此它們是不同的「來源」。

步驟¶

假設您的前端在瀏覽器中以 http://localhost:8080 運行，並且其 JavaScript 正嘗試與在 http://localhost 運行的後端通訊（因為我們沒有指定連接埠，瀏覽器會假設預設連接埠為 80）。

然後，瀏覽器會向 :80 後端發送 HTTP OPTIONS 請求，如果後端發送授權來自此不同來源 (http://localhost:8080) 的通訊的適當標頭，則 :8080 瀏覽器將允許前端中的 JavaScript 向 :80 後端發送其請求。

為達成此目的，:80 後端必須具備「允許的來源」清單。

在這種情況下，清單必須包含 http://localhost:8080 才能使 :8080 前端正常運作。

萬用字元¶

也可以將清單宣告為 "*"（「萬用字元」）以表示允許所有來源。

但這只會允許某些類型的通訊，排除所有涉及憑證的通訊：Cookie、與 Bearer 權杖一起使用的授權標頭等。

因此，為了讓一切正常運作，最好明確指定允許的來源。

使用 `CORSMiddleware`¶

您可以使用 CORSMiddleware 在您的 FastAPI 應用程式中進行設定。

匯入 CORSMiddleware。
建立允許來源的清單（以字串形式）。
將其作為「中介軟體」新增至您的 FastAPI 應用程式。

您也可以指定您的後端是否允許

憑證（授權標頭、Cookie 等）。
特定的 HTTP 方法 (POST、PUT) 或使用萬用字元 "*" 允許所有方法。
特定的 HTTP 標頭或使用萬用字元 "*" 允許所有標頭。

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"}

CORSMiddleware 實作使用的預設參數預設為限制性，因此您需要明確啟用特定來源、方法或標頭，才能允許瀏覽器在跨網域環境中使用它們。

支援以下參數

allow_origins - 允許發出跨來源請求的來源清單。例如 ['https://example.org', 'https://www.example.org']。您可以使用 ['*'] 允許任何來源。
allow_origin_regex - 用於匹配允許發出跨來源請求的來源的正規表示式字串。例如 'https://.*\.example\.org'。
allow_methods - 允許跨來源請求的 HTTP 方法清單。預設為 ['GET']。您可以使用 ['*'] 允許所有標準方法。
allow_headers - 允許跨域請求的 HTTP 請求標頭列表。預設為 []。您可以使用 ['*'] 允許所有標頭。對於簡單的 CORS 請求，始終允許 Accept、Accept-Language、Content-Language 和 Content-Type 標頭。
allow_credentials - 指示是否允許跨域請求攜帶 Cookie。預設為 False。此外，若要允許憑證，allow_origins 不能設定為 ['*']，必須指定來源。
expose_headers - 指示瀏覽器可以訪問的任何響應標頭。預設為 []。
max_age - 設定瀏覽器快取 CORS 響應的最長時間（以秒為單位）。預設為 600。

中間件會回應兩種特定類型的 HTTP 請求...

CORS 預檢請求¶

這些是任何帶有 Origin 和 Access-Control-Request-Method 標頭的 OPTIONS 請求。

在這種情況下，中間件會攔截傳入的請求，並使用適當的 CORS 標頭進行響應，並以 200 或 400 響應來提供資訊。

簡單請求¶

任何帶有 Origin 標頭的請求。在這種情況下，中間件會照常傳遞請求，但會在響應中包含適當的 CORS 標頭。