Cloudflare新域名下FastAPI后端Access-Control-Allow-Origin CORS头缺失错误

前端通过Cloudflare绑定域名 playlistmoodevaluator.com，指向托管在Render上的React CRA应用；后端通过Cloudflare绑定子域名 api.playlistmoodevaluator.com，指向Fly.io上的FastAPI后端。已在FastAPI中配置CORS中间件允许前端域名，但首次请求后端时仍报错：

Reason: CORS header ‘Access-Control-Allow-Origin’ missing

后端CORS配置代码如下：

origins = [
    "https://playlistmoodevaluator.com",
    "https://www.playlistmoodevaluator.com",
]

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

注：未使用Cloudflare域名路由前，该流程可正常工作。

• 检查Cloudflare对请求Origin的篡改：查看Fly.io后端日志，确认实际收到的Origin请求头是否为https://playlistmoodevaluator.com。Cloudflare的缓存、页面规则等功能可能会修改Origin字段，导致后端CORS白名单匹配失败。
• 调整Cloudflare的HTTPS与缓存规则：临时关闭Cloudflare的「自动HTTPS重写」功能，或给api.playlistmoodevaluator.com添加页面规则，禁用缓存并设置「保留原始请求头」。
• 临时放宽CORS配置排查：将allow_origins改为["*"]测试，如果请求恢复正常，说明确实是Origin匹配问题。之后可改用动态验证Origin的方式：

  from fastapi.middleware.cors import CORSMiddleware
  from starlette.requests import Request
  
  # 先保留基础CORS中间件配置
  app.add_middleware(
      CORSMiddleware,
      allow_origins=["*"],
      allow_credentials=True,
      allow_methods=["*"],
      allow_headers=["*"],
  )
  
  # 添加自定义中间件做精准Origin验证
  @app.middleware("http")
  async def validate_origin(request: Request, call_next):
      origin = request.headers.get("Origin")
      allowed_origins = {"https://playlistmoodevaluator.com", "https://www.playlistmoodevaluator.com"}
      response = await call_next(request)
      if origin in allowed_origins:
          response.headers["Access-Control-Allow-Origin"] = origin
      return response
  

• 检查Fly.io代理配置：确认Fly.io的fly.toml中没有修改Origin请求头的配置，避免反向代理篡改请求头。
• 确认Cloudflare SSL模式：将api.playlistmoodevaluator.com的SSL模式设置为「完全」或「严格」，防止SSL握手异常导致请求头丢失。

内容的提问来源于stack exchange，提问作者tprebenda