如何在C#项目的Swagger UI中配置Base Url？

下面提供几种在ASP.NET Core项目的Swagger UI中添加Base Url显示的方案，样式可匹配你需要的效果：

方案一：自定义Swagger Index页面（完全控制布局） #

1. 创建自定义HTML文件
   在项目中新建CustomSwaggerIndex.html，参考Swagger默认页面结构，在顶部添加Base Url显示块：

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <title>Your API - Swagger UI</title>
       <link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist@5/swagger-ui.css" />
   </head>
   <body>
       <!-- Base Url显示区域 -->
       <div style="padding: 10px 20px; background: #f8f9fa; border-bottom: 1px solid #e9ecef;">
           <span style="font-weight: bold; margin-right: 8px;">Base Url:</span>
           <span style="color: #007bff;">https://your-api-domain.com/api</span>
       </div>
       
       <div id="swagger-ui"></div>
       
       <script src="https://unpkg.com/swagger-ui-dist@5/swagger-ui-bundle.js"></script>
       <script src="https://unpkg.com/swagger-ui-dist@5/swagger-ui-standalone-preset.js"></script>
       <script>
           window.onload = function() {
               const ui = SwaggerUIBundle({
                   url: "/swagger/v1/swagger.json",
                   dom_id: '#swagger-ui',
                   presets: [
                       SwaggerUIBundle.presets.apis,
                       SwaggerUIStandalonePreset
                   ],
                   layout: "StandaloneLayout"
               });
               window.ui = ui;
           };
       </script>
   </body>
   </html>
   

   将该文件的生成操作设置为「嵌入的资源」（右键文件→属性→生成操作）。

2. 配置Swagger使用自定义页面
   在.NET 6+的Program.cs中：

   app.UseSwaggerUI(options =>
   {
       options.IndexStream = () => typeof(Program).Assembly.GetManifestResourceStream("YourProjectNamespace.CustomSwaggerIndex.html");
       options.SwaggerEndpoint("/swagger/v1/swagger.json", "Your API V1");
   });
   

   替换YourProjectNamespace为实际项目命名空间。

方案二：注入自定义JS动态显示Base Url（轻量快捷） #

这种方式无需修改整个页面，适合快速添加功能：

1. 添加自定义JS文件
   在项目wwwroot目录下新建swagger-custom.js，支持动态获取Base Url+复制功能：

   window.onload = function() {
       // 可自定义Base Url，或从当前域名动态获取
       const baseUrl = window.location.origin + "/api";
       
       // 构建显示容器
       const baseUrlContainer = document.createElement('div');
       baseUrlContainer.style.cssText = `
           padding: 10px 20px; 
           background: #f8f9fa; 
           border-bottom: 1px solid #e9ecef;
           display: flex;
           align-items: center;
           gap: 10px;
       `;
       
       // 添加复制按钮
       const copyBtn = document.createElement('button');
       copyBtn.textContent = '复制';
       copyBtn.style.cssText = `
           padding: 4px 8px;
           border: none;
           border-radius: 4px;
           background: #007bff;
           color: white;
           cursor: pointer;
       `;
       copyBtn.onclick = () => {
           navigator.clipboard.writeText(baseUrl).then(() => {
               copyBtn.textContent = '已复制';
               setTimeout(() => copyBtn.textContent = '复制', 2000);
           });
       };
       
       // 拼接内容并插入页面
       baseUrlContainer.innerHTML = `<span style="font-weight: bold;">Base Url:</span> <span style="color: #007bff;">${baseUrl}</span>`;
       baseUrlContainer.appendChild(copyBtn);
       const swaggerTopBar = document.querySelector('.swagger-ui .topbar');
       swaggerTopBar.insertAdjacentElement('beforebegin', baseUrlContainer);
   };
   

2. 配置Swagger注入JS
   在.NET 6+的Program.cs中：

   app.UseSwaggerUI(options =>
   {
       options.SwaggerEndpoint("/swagger/v1/swagger.json", "Your API V1");
       options.InjectJavascript("/swagger-custom.js");
   });
   

适配ASP.NET Core 2.x/3.x（Startup.cs） #

旧版本框架在Startup.cs的Configure方法中配置：

app.UseSwaggerUI(c =>
{
    c.SwaggerEndpoint("/swagger/v1/swagger.json", "Your API V1");
    c.InjectJavascript("/swagger-custom.js");
    // 若用自定义Index页面，替换为：
    // c.IndexStream = () => GetType().Assembly.GetManifestResourceStream("YourNamespace.CustomSwaggerIndex.html");
});

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