OCRS介绍

跨域资源共享（CORS） 是一种安全机制，它允许运行在一个源（Origin）的 Web 应用程序，通过浏览器向另一个源的服务器发起跨域 HTTP 请求，并获得授权的资源。

浏览器出于安全考虑，默认实施了 同源策略（Same-Origin Policy）。不允许前端 JS 跨域访问后端接口。

源就是URK地址，由 协议（Protocol）、域名（Host/Domain） 和 端口号（Port） 三部分组成。
如果被请求的URL（后端）与发起请求的的URL(前端)不同（三者中任一不同），则视为 跨域（Cross-Origin） 请求。

在实际开发中，例如前端运行在 http://localhost:3000，而后端 API 运行在 http://localhost:8000，这就构成了跨域。如果没有 CORS 机制，浏览器会阻止前端获取后端的响应数据。

前端页面	后端API	是否跨域
http://localhost:3000	http://localhost:8000	✅ 是跨域
https://example.com	https://api.example.com	✅ 是跨域
https://example.com	https://example.com	❌ 不是跨域

4-2 CORS 解决方案原理

CORS 通过 HTTP 响应头来告诉浏览器：哪些源（Origin）可以访问资源。

常见响应头包括：

Header	说明
`Access-Control-Allow-Origin`	允许访问的源，如 `*` 或 `http://localhost:3000`
`Access-Control-Allow-Methods`	允许的 HTTP 方法，如 `GET, POST, PUT`
`Access-Control-Allow-Headers`	允许的请求头
`Access-Control-Allow-Credentials`	是否允许携带 Cookie

浏览器在实际请求前（尤其是 POST/PUT/DELETE 请求）会发起一个 预检请求（OPTIONS），用来验证服务端是否允许跨域。

4-3 在 FastAPI 中使用 CORS

FastAPI 提供了官方中间件来简化 CORS 配置：

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

app = FastAPI()

# 允许的来源（可以是域名列表）
origins = [
    "http://localhost",
    "http://localhost:3000",
    "https://your-frontend-domain.com"
]

# 添加 CORS 中间件
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],            # 允许访问的源
    allow_credentials=True,           # 允许携带 Cookie
    allow_methods=["*"],              # 允许所有请求方法
    allow_headers=["*"],              # 允许所有请求头
)

@app.get("/")
def read_items():
    return {"message": "CORS test successful!"}

场景	推荐配置
本地开发环境	`allow_origins=["*"]`（方便调试）
生产环境	指定具体域名，如：`["https://frontend.example.com"]`
允许前端携带凭证（Cookies/token）	`allow_credentials=True` 且 `allow_origins` 不能为 `*`
只允许部分方法	`allow_methods=["GET", "POST"]`
调试 OPTIONS 请求	可添加日志或打印 `request.method` 检查预检请求

总结:

内容	说明
CORS 是什么	浏览器安全机制，限制跨域请求
FastAPI 支持	通过 `CORSMiddleware` 中间件配置
核心参数	`allow_origins`, `allow_methods`, `allow_headers`, `allow_credentials`
调试技巧	先允许 `*`，确认功能后再收紧安全范围

OCRS介绍

4-1 CORS 介绍 (Cross-Origin Resource Sharing)

4-2 CORS 解决方案原理

4-3 在 FastAPI 中使用 CORS