nginx配置引发跨域的问题分析

问题复盘（脱敏版）

现象

访问前端页面 https://<your-domain>/datasets 时，静态资源能加载，但数据集列表 API 失败。浏览器 Network 里表现为跨域错误；排查过程中还短暂出现过 502。

根因：不是 CORS 中间件没配，而是 Origin 不一致

前端请求 API 时会拼接 NEXT_PUBLIC_API_PREFIX：

  const urlPrefix = isPublicAPI ? PUBLIC_API_PREFIX : API_PREFIX  let urlWithPrefix = (url.startsWith('http://') || url.startsWith('https://'))    ? url    : `${urlPrefix}${url.startsWith('/') ? url : `/${url}`}`

最初配置（有问题）：

协议不同（https vs http），浏览器视为不同 Origin，即使域名相同也会跨域。

同时触发两个问题：

1. Mixed Content：HTTPS 页面请求 HTTP 接口，浏览器会拦截
2. CORS 预检：跨域 POST 需要服务端返回正确 CORS 头

所以控制台看起来像 CORS 问题，本质是 API 前缀协议和页面不一致。

架构上本来不需要跨域

项目 Nginx 已做同域反代：

    location /vector {      proxy_pass http://api:8000;      include proxy.conf;    }    ...    location / {      proxy_pass http://web:3000;      include proxy.conf;    }

前端和 API 都在同一域名下，只要 API 走相对路径 /vector/...，就是同域请求，不需要 CORS。

排查过程

502 是网关 moment 连不上 API 后端（重启、Pod 未 Ready 等），不是 URL 写法本身导致的。

最终方案

把 NEXT_PUBLIC_API_PREFIX 改成与页面 同协议、同域名 的地址（或留空走相对路径），并 重新构建 web 镜像（NEXT_PUBLIC_* 在 build 时打进 JS，只改运行时 env 不 rebuild 可能仍用旧值）。

推荐配置：

NEXT_PUBLIC_API_PREFIX=# 或NEXT_PUBLIC_API_PREFIX=https://<your-domain>

关于 CORS 中间件

    app_.add_middleware(        CORSMiddleware,        allow_origins=["*"],        allow_credentials=True,        ...    )

allow_origins=["*"] + allow_credentials=True 按规范不能同时使用。同域部署下 CORS 基本用不到；如果以后要跨域 + 带 Cookie，需要改成具体 Origin 列表。

经验总结

1. 先对 Origin：跨域先看页面和 API 的 scheme/host/port 是否一致，不要先怀疑 CORS 中间件。
2. 同域反代优先：Nginx 已反代 /vector 时，API 前缀留空最省事。
3. 改 NEXT_PUBLIC_* 必须 rebuild web，否则浏览器可能还在用旧 JS。
4. 502 ≠ CORS：502 是网关到后端的问题，和跨域是两类问题。

一句话：页面是 HTTPS，API 前缀却配成了 HTTP，浏览器判定跨域并拦截；换成与页面对齐的 URL 后，请求变成同域，问题消失。