get_swagger_ui_html 导致 FastAPI 应用程序中显示不需要的服务器选项

Question

我需要更改样式并向 FastAPI 应用程序中默认生成的文档添加额外的 HTML，因此我使用

get_swagger_ui_html

来实现此目的。这会导致单击“试用”部分按钮时出现“服务器”的操作级别选项 - 我不希望用户看到此选项。我使用 FastAPI 版本 0.111.0 作为上下文。在这个问题中也提出了错误，但没有使用

get_swagger_ui_html

：fastapi swagger界面显示操作级别选项覆盖服务器选项

这个最小的例子没有有问题：

# imports
from fastapi import FastAPI
import uvicorn

# set up app
app = FastAPI(
    description='some description',
    title=' a title',
    version="1.0.0",
)

@app.get("/dummy_endpoint")
async def endpoint():
    return 'woohoo'

if __name__ == "__main__":
    # run API with uvicorn
    uvicorn.run(app, host="127.0.0.1", port=8000)

如果我们引入

get_swagger_ui_html

的使用，那么我们就会遇到问题。请参阅下面的代码和屏幕截图：

# imports
from fastapi import FastAPI
from fastapi.responses import HTMLResponse
from fastapi.openapi.docs import (
    get_swagger_ui_html,
    get_swagger_ui_oauth2_redirect_html,
)
import uvicorn

# set up app
app = FastAPI(
    docs_url = None,
    description='some description',
    title=' a title',
    version="1.0.0",
)

@app.get("/dummy_endpoint")
async def endpoint():
    return 'woohoo'

@app.get("/docs", include_in_schema=False)
async def custom_swagger_ui_html():

    swagger_ui_content = get_swagger_ui_html(
        openapi_url=app.openapi_url,
        swagger_ui_parameters={
        "syntaxHighlight": False,
        "defaultModelsExpandDepth": -1},
        title=app.title,
        oauth2_redirect_url=app.swagger_ui_oauth2_redirect_url,
        swagger_js_url="https://unpkg.com/swagger-ui-dist@5/swagger-ui-bundle.js",
        swagger_css_url="https://unpkg.com/swagger-ui-dist@5/swagger-ui.css",
    )
    #allows us to add header, footer, css etc.
    html_content = f'{swagger_ui_content.body.decode("utf-8")}'

    return HTMLResponse(html_content)

if __name__ == "__main__":
    # run API with uvicorn
    uvicorn.run(app, host="127.0.0.1", port=8000)

截图：

我们可以简单地从 HTML 中删除服务器部分吗？从任何文档来看，如何做到这一点似乎并不明显。目前，我获取了 HTML 元素并添加 CSS 来隐藏它们，但我更想要一个正确的解决方案。谢谢！

Answer 1

这很可能是这个 Swagger UI 错误。它似乎是在 Swagger UI v. 5.9.2 中引入的。 FastAPI 0.111 默认使用 Swagger UI v. 5.9.0，而您的第二个示例在撰写本文时获取 v. 5.17.14。 （顺便说一句，FastAPI 的下一次更新将从固定的 Swagger UI v. 5.9.0 切换到“最新 5.x”。）

在 Swagger UI 修复此错误之前，唯一的解决方法是手动修复 Swagger UI 布局。

选项 1.使用 CSS 隐藏操作级“服务器”

（你说这就是你目前正在做的事情。）

对于未来的读者 - 您需要将类似的内容添加到您的 Swagger UI CSS 中：

.swagger-ui .operation-servers {
  display: none;
  visibility: hidden;
}

选项 2.使用 Swagger UI 插件隐藏操作级“服务器”

另一个（更详细）选项是编写一个

Swagger UI 插件以从 DOM 中完全删除不需要的元素。

简单的“隐藏此元素”插件的代码可以直接添加到Swagger UI初始化代码中。例如，要隐藏操作级服务器，请按如下所示更改 Swagger UI 初始化代码；更改标记为“第 1 部分”和“第 2 部分”：

window.onload = function() {

  // Part 1. Custom plugin to hide the operation-level "Servers" section
  const HideOperationServers = () => {
    return {
      wrapComponents: {
        OperationServers: () => () => null
      }
    }
  }
  // END of custom plugin


  window.ui = SwaggerUIBundle({
    ...
    dom_id: '#swagger-ui',
    ...
    plugins: [
      SwaggerUIBundle.plugins.DownloadUrl,
      HideOperationServers. // <--------- Part 2. Add the custom plugin to this list
    ],
    layout: "StandaloneLayout"
  });

};