Nginx 通过 map 指令统一定义微前端白名单变量,结合 location ^~ 精确匹配路径并动态注入对应 $appX_origin,配合 always 参数和 OPTIONS 预检复用变量,实现可扩展、可维护的声明式跨域控制。

直接在 Nginx 中为不同微前端应用配置独立的跨域白名单,核心是用 map 指令 + 动态变量 + 精确 location 匹配,避免硬编码、重复 server 块或 if 嵌套失控。关键不是“给每个应用写一套配置”,而是建立可扩展、可维护的声明式白名单机制。
用 map 构建多组可信 Origin 映射
在 http 块顶部统一定义多个白名单变量,按微应用命名区分,便于后续引用和审计:
map $http_origin $app1_origin { default ""; "~^https?://(app1|staging-app1)\.company\.com$" "$http_origin"; }map $http_origin $app2_origin { default ""; "~^https?://(dashboard|beta-dashboard)\.company\.net$" "$http_origin"; }map $http_origin $admin_origin { default ""; "~^https?://admin\.(dev|prod)\.company\.io$" "$http_origin"; }
每个 map 只匹配对应微应用的合法域名(支持正则),匹配成功则赋值为原始 Origin,否则为空字符串——Nginx 不会添加头,浏览器自然拒绝。
按 API 路径绑定对应微应用白名单
微前端通常按前缀路由隔离(如 /api/app1/、/api/app2/),利用 location ^~ 精准匹配路径,并关联对应白名单变量:
立即学习“前端免费学习笔记(深入)”;
location ^~ /api/app1/ { add_header 'Access-Control-Allow-Origin' $app1_origin always; add_header 'Access-Control-Allow-Credentials' 'true'; proxy_pass http://backend-app1; }location ^~ /api/app2/ { add_header 'Access-Control-Allow-Origin' $app2_origin always; add_header 'Access-Control-Allow-Credentials' 'true'; proxy_pass http://backend-app2; }location ^~ /api/admin/ { add_header 'Access-Control-Allow-Origin' $admin_origin always; add_header 'Access-Control-Allow-Credentials' 'true'; proxy_pass http://backend-admin; }
注意:必须加 always 参数,否则 204 或错误响应不带 CORS 头;^~ 保证前缀匹配优先级高于正则,避免规则冲突。
统一处理 OPTIONS 预检,但头信息随路径动态生效
所有跨域请求都需预检,但响应头应与主请求保持一致。在各 location 内复用对应白名单变量,不写死值:
- 在
location ^~ /api/app1/中:if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' $app1_origin; add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, X-Requested-With'; add_header 'Access-Control-Max-Age' 86400; add_header 'Content-Length' 0; return 204; } - 同理,
app2和admin的 location 内分别使用$app2_origin和$admin_origin
这样预检响应的 Origin 始终与真实请求一致,且不向未授权源泄露策略。
开发与测试环境差异化控制
微前端常有本地开发(localhost:3000)、预发(staging.company.com)、生产(app.company.com)多套环境。可在 map 中分环境定义:
map $http_origin $app1_origin { default ""; "~^https?://localhost:3000$" "$http_origin"; "~^https?://(app1|staging-app1)\.company\.com$" "$http_origin"; }- 生产环境上线前,注释掉 localhost 行即可,无需改 location 或重启服务
- 也可用
geo模块结合$remote_addr实现 IP 级灰度放行(如仅允许内网开发机通过 localhost 跨域)
白名单逻辑集中管理,路径策略与环境策略解耦,运维和前端协作更清晰。


















