问题发现

前端vue3写了个页面，调用后台一个服务，出现了跨域访问错误，截图如下：

示例代码如下：

from typing import Union

from fastapi import FastAPI
from pydantic import BaseModel
import random

app = FastAPI()

class Item(BaseModel):
    name: str
    price: float
    is_offer: Union[bool, None] = None


@app.get("/")
def read_root():
    return {"Hello": "World"}


@app.get("/items/{item_id}")
def read_item(item_id: int, q: Union[str, None] = None):
    return {"item_id": item_id, "q": q}


@app.put("/items/{item_id}")
def update_item(item_id: int, item: Item):
    return {"item_name": item.name, "item_id": item_id}

@app.get("/score/{count}")
def get_score(count: int):
    if count <= 0: return {}
    result = []
    for i in range(count):
        result.append({"number": i+1, "score": random.uniform(0.0, 100.0)})
    return result   

问题解决

在 FastAPI 中设置跨域访问（CORS）可以通过使用 fastapi.middleware.cors 模块来实现。代码中配置 CORS 的步骤如下：

• 导入 CORSMiddleware；
• 配置 CORS 中间件；
• 添加中间件到 FastAPI 应用。

修改后的代码如下：

from typing import Union

from fastapi import FastAPI
from pydantic import BaseModel
import random
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

# 配置 CORS
origins = [
    "http://localhost",
    "http://localhost:8000",
    "http://localhost:3000",  # 前端运行在 3000 端口
    "http://localhost:5173"
    # 添加其他允许的来源
]

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

class Item(BaseModel):
    name: str
    price: float
    is_offer: Union[bool, None] = None


@app.get("/")
def read_root():
    return {"Hello": "World"}


@app.get("/items/{item_id}")
def read_item(item_id: int, q: Union[str, None] = None):
    return {"item_id": item_id, "q": q}


@app.put("/items/{item_id}")
def update_item(item_id: int, item: Item):
    return {"item_name": item.name, "item_id": item_id}

@app.get("/score/{count}")
def get_score(count: int):
    if count <= 0: return {}
    result = []
    for i in range(count):
        result.append({"number": i+1, "score": random.uniform(0.0, 100.0)})
    return result   

解释

• origins: 这是一个列表，包含允许访问你的 API 的来源。我们可以添加多个来源，例如 “http://localhost:3000”。
• allow_credentials: 如果设置为 True，则允许发送凭据（如 cookies）。
• allow_methods: 允许的 HTTP 方法，[“*”] 表示允许所有方法。
• allow_headers: 允许的 HTTP 头，[“*”] 表示允许所有头。

修改结果

代码修改后能正常执行：