如何通过Nginx和Docker向Blazor WASM传递HttpClient URI配置

完全可以实现，核心要注意Blazor WASM是运行在用户浏览器侧的静态应用，无法直接读取Docker容器内Nginx的本地配置/环境变量，所有配置传递都需要通过HTTP请求层完成，下面是3种可直接落地的方案，按需选择即可。

方案1：Nginx动态返回配置（推荐，无侵入、灵活度最高） #

不需要重新编译WASM项目，也不需要修改打包后的静态文件，靠Nginx拦截配置请求动态返回内容即可：

• WASM项目侧不要硬编码API地址，应用启动时优先请求固定路径的配置文件获取ApiBaseUrl，再初始化HttpClient。可以在wwwroot目录下放一个占位用的config.json，内容写{"ApiBaseUrl": ""}即可。
• Nginx配置中单独拦截/config.json请求，直接根据容器传入的环境变量拼接返回JSON内容，同时禁用缓存避免浏览器拿到旧配置：

location = /config.json {
    default_type application/json;
    return 200 '{"ApiBaseUrl": "$API_BASE_URL"}';
    add_header Cache-Control no-store always;
}

• 启动Docker容器时，通过环境变量传入实际API地址即可，例如：docker run -d -p 8080:80 -e API_BASE_URL=https://api.your-domain.com/ your-nginx-wasm-image
• WASM侧启动逻辑参考：

// Program.cs
var httpClient = new HttpClient();
var config = await httpClient.GetFromJsonAsync<AppConfig>("config.json");
builder.Services.AddScoped(_ => new HttpClient { BaseAddress = new Uri(config.ApiBaseUrl) });

方案2：容器启动时替换静态文件占位符（简单场景适用） #

如果不想加单独的配置请求，可以在容器启动阶段直接替换打包后静态文件里的占位符：

• 编译WASM时，在wwwroot/appsettings.json里把API地址写成固定占位符，例如{"ApiBaseUrl": "REPLACE_WITH_API_URL"}
• 编写Docker启动入口脚本，在Nginx启动前替换所有静态文件里的占位符：

#!/bin/sh
# 替换html、js、json文件里的占位符
find /usr/share/nginx/html -type f \( -name "*.html" -o -name "*.js" -o -name "*.json" \) -exec sed -i "s|REPLACE_WITH_API_URL|$API_BASE_URL|g" {} \;
# 启动Nginx
nginx -g "daemon off;"

• 该方案缺点是每次修改API地址必须重启容器触发替换，且如果静态资源做了压缩、hash签名，需要注意替换逻辑要匹配到实际文件，灵活度不如方案1。

方案3：Nginx反向代理同域转发（同域部署首选，零配置） #

如果WASM前端和API服务可以通过同一个域名对外提供服务，完全不需要额外传递地址：

• WASM侧所有API请求直接写相对路径，例如/api/xxx，HttpClient的BaseAddress直接用默认的当前站点地址即可。
• 在Nginx配置中给/api路径加反向代理规则，把请求转发到实际的API服务地址：

location / {
    root /usr/share/nginx/html;
    try_files $uri $uri/ /index.html;
}

location /api/ {
    # 转发到内网部署的API服务
    proxy_pass http://your-internal-api-service:8000/;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $remote_addr;
}

• 该方案不需要额外传参，也不会产生跨域问题，是同域部署场景下成本最低的实现方式。

注意：不要尝试让WASM直接读取Docker容器内的环境变量、Nginx本地配置文件，WASM的运行环境是终端用户的浏览器，和服务端的Docker、Nginx环境是网络隔离的，所有配置必须通过HTTP响应的形式传递到前端。

内容的提问来源于stack exchange，提问作者BendEg