问题发现

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

示例代码如下：

from typing import Unionfrom fastapi import FastAPI
from pydantic import BaseModel
import randomapp = FastAPI()class Item(BaseModel):name: strprice: floatis_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 Unionfrom fastapi import FastAPI
from pydantic import BaseModel
import random
from fastapi.middleware.cors import CORSMiddlewareapp = 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: strprice: floatis_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 头，[“*”] 表示允许所有头。

修改结果

代码修改后能正常执行：