FastAPI+CORS：解决跨域问题的快速方案

什么是跨域问题？¶

当我们用前端代码（比如网页的JavaScript）去请求另一个不同域名、端口或协议的后端接口时，浏览器会因为安全策略（同源策略）自动拦截这个请求，这就是“跨域问题”。

举个例子：
- 前端页面部署在 http://localhost:3000（假设是一个Vue/React项目）。
- 后端API运行在 http://localhost:8000（FastAPI服务）。
- 前端代码用 fetch 或 axios 请求后端接口时，浏览器会报错“跨域请求被阻止”。

为什么FastAPI默认会有跨域问题？¶

FastAPI 本身不会自动处理跨域请求，当前端请求与后端“不同源”时，浏览器会拒绝响应。这是浏览器的安全机制，防止恶意网站获取其他网站的数据。

如何用CORS解决跨域问题？¶

解决跨域的核心是在后端添加 CORS（跨域资源共享）中间件，告诉浏览器“哪些前端域名可以访问我的接口”。FastAPI 通过 CORSMiddleware 实现这一点。

步骤1：安装依赖（FastAPI自带，无需额外安装）¶

FastAPI 已内置 CORSMiddleware，只需导入即可使用。

步骤2：配置CORS中间件¶

在FastAPI应用中添加CORS中间件，允许指定的前端域名、请求方法和请求头访问后端接口。

代码示例：¶

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

# 添加CORS中间件
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # 允许所有前端域名（开发环境用，生产环境需指定具体域名）
    allow_credentials=True,  # 是否允许携带cookies
    allow_methods=["*"],  # 允许所有请求方法（GET, POST等）
    allow_headers=["*"],  # 允许所有请求头
)

# 定义一个测试接口
@app.get("/api/hello")
async def read_hello():
    return {"message": "Hello, CORS!"}

关键参数解释¶

注意事项¶

1. 生产环境避免用["*"]：
   allow_origins=["*"] 允许所有域名访问，存在安全风险。生产环境需指定具体域名，例如：

   allow_origins=["https://your-frontend.com"]  # 只允许该域名

2. allow_credentials=True时，allow_origins不能用["*"]：
   若前端请求携带cookies（如登录态），allow_origins必须明确指定域名，且allow_credentials=True。

前端请求示例¶

假设前端用 JavaScript 的 fetch 调用后端接口，配置CORS后即可正常请求：

// 前端代码（可放在HTML中或单独JS文件）
async function fetchData() {
  try {
    const response = await fetch("http://localhost:8000/api/hello");
    const data = await response.json();
    console.log("后端返回的数据：", data);
  } catch (error) {
    console.error("跨域请求失败：", error);
  }
}

fetchData();

结果：若后端CORS配置正确，前端控制台会打印 {"message": "Hello, CORS!"}，无跨域错误。

总结¶

跨域问题本质是浏览器的安全限制，FastAPI通过 CORSMiddleware 快速解决。只需简单配置 allow_origins、allow_methods 等参数，即可让前端顺利请求后端接口。开发时可用 ["*"] 快速测试，生产环境需严格限制域名和方法，确保安全。

通过以上步骤，你已掌握FastAPI解决跨域的核心方法，可直接应用到项目中！