FastAPI 跨域访问CORS设置详解

FastAPI 跨域访问CORS设置详解

引用

CSDN

1.

https://m.blog.csdn.net/Humbunklung/article/details/144118836

问题发现

在前端开发中，当Vue3应用尝试调用后台服务时，可能会遇到跨域访问错误。例如，以下截图显示了一个典型的跨域错误：

这是一个基本的FastAPI服务示例代码：

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模块来实现。以下是具体的配置步骤：

1. 导入CORSMiddleware
2. 配置CORS中间件
3. 将中间件添加到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头，["*"]表示允许所有头。

修改结果

经过上述配置后，代码能够正常执行，不再出现跨域错误：