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 跨域）
白名单逻辑集中管理，路径策略与环境策略解耦，运维和前端协作更清晰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
