新 Cloudfare 域的 CORS 标头“Access-Control-Allow-Origin”缺失错误

Question

我的前端注册到 Cloudflare 上的

playlistmoodevaluator.com

域，路由到 Render 上托管的基于 React CRA 的应用程序。 我的后端注册到 Cloudflare 上的

api.playlistmoodevaluator.com

子域，路由到 Fly.io 上托管的 FastAPI python 后端。

对后端的第一个请求失败并显示

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

，尽管我的 FastAPI 后端配置了 CORS 中间件来接受来自该前端域的请求。

我确保我的后端配置为接受来自前端的请求，如下所示：

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

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

这是错误的屏幕截图：

正如您在下面所附的屏幕截图中看到的，这个确切的来源（https://playlistmoodevaluator.com）是我后端的中间件所期望的，应该被接受。 这个过程一直有效，直到我向 Cloudflare 注册了我的域并开始通过我的新域路由我的流量。

Answer 1

我在“完整”SSL 模式下注册了我的 Cloudfare 域，这意味着所有域/子域都必须使用 SSL/TSL（推荐）。

我轻松地为注册到我的主域的前端（部署在 Render 上）颁发了 SSL 证书，但我的后端（托管在 Fly.io 上）没有为我的子域颁发了 SSL 证书。因此，我的子域路由到非 HTTPS 服务器，并且我的 Cloudfare DNS 拒绝流量，因为“完整”配置需要它。

转到 Fly.io 并为我的子域颁发 SSL 证书后，我的应用程序按预期运行！！

tldr；如果您的 DNS 使用“完整”SSL 模式，则前端和后端都必须为其各自的域颁发 SSL 证书！