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 后，请求变成同域，问题消失。

到此这篇关于nginx 配置导致跨域的问题分析的文章就介绍到这了,更多相关nginx 配置导致跨域内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论