FastAPI 學習之路（三十一）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）。

然后，瀏覽器會向后端發送一個 HTTP OPTIONS 請求，如果后端發送適當的 headers 來授權來自這個不同源（http://localhost:8080）的通信，瀏覽器將允許前端的 JavaScript 向后端發送請求。

為此，后端必須有一個「允許的源」列表。

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

 

通配符

    也可以使用 "*"（一個「通配符」）聲明這個列表，表示全部都是允許的。

但這僅允許某些類型的通信，不包括所有涉及憑據的內容：像 Cookies 以及那些使用 Bearer 令牌的授權 headers 等。

因此，為了一切都能正常工作，最好顯式地指定允許的源。

 

    我們看下Fastapi中如何使用，使用CCORS，

    使用 CORSMiddleware

你可以在 FastAPI 應用中使用 CORSMiddleware 來配置它。

• 導入 CORSMiddleware。

• 創建一個允許的源列表（由字符串組成）。

• 將其作為「中間件」添加到你的 FastAPI 應用中。

你也可以指定后端是否允許：

• 憑證（授權 headers，Cookies 等）。

• 特定的 HTTP 方法（POST，PUT）或者使用通配符 "*" 允許所有方法。

• 特定的 HTTP headers 或者使用通配符 "*" 允許所有 headers。

我們看下代碼

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
app = FastAPI()
origins = [
    "http://localhost"
]
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["GET"],
    allow_headers=["*"],
)
@app.post("/")
def main():
    return {"message": "Hello World"}

其實在實際的開發中，使用起來很簡單。

文章首發在公眾號，歡迎關注。