如何在Node.js的swagger-ui-express中移除SwaggerUI头部？

我在Node.js中通过swagger-ui-express使用Swagger UI，配置代码如下：

const swaggerOptions = {
  definition: {
    openapi: "3.0.1",
    info: {
      title: "",
      version: "0.1",
      description:
        "",
    },
    servers: [
      {
        url: `http://${Config.get("HOST")}:${Config.get(
          "PORT"
        )}/api/v1`,
      },
    ],
  },

  apis: ["swaggerfile.js"],
};

生成的Swagger UI包含如下头部：

我尝试在swaggerOptions中添加以下配置：

header: {
  display:"none"
},

以及：

server: {
  display:"none"
},

但均无法移除该头部，请问该如何操作才能移除SwaggerUI的这个头部？

解决方案 #

你之前的配置思路有误：swaggerOptions里的definition是OpenAPI规范的定义内容，仅负责描述API结构，和Swagger UI的显示样式、控制逻辑无关。要隐藏UI头部，需要在swagger-ui-express的setup方法中传入UI专属的配置项。

方法1：自定义CSS隐藏头部 #

这是最直接的方式，通过CSS完全隐藏顶部导航栏：

const swaggerJsdoc = require('swagger-jsdoc');
const swaggerUi = require('swagger-ui-express');

// 原有swaggerOptions定义保持不变
const swaggerOptions = {
  definition: {
    openapi: "3.0.1",
    info: {
      title: "",
      version: "0.1",
      description: "",
    },
    servers: [
      {
        url: `http://${Config.get("HOST")}:${Config.get("PORT")}/api/v1`,
      },
    ],
  },
  apis: ["swaggerfile.js"],
};

const swaggerDocument = swaggerJsdoc(swaggerOptions);

// 在setup时传入自定义CSS配置
app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument, {
  customCss: '.swagger-ui .topbar { display: none; }'
}));

方法2：通过UI配置控制显示细节 #

如果只想隐藏头部的「Try it out」按钮而非整个头部，可以配置supportedSubmitMethods为空数组：

app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument, {
  swaggerOptions: {
    supportedSubmitMethods: []
  }
}));

若你的swagger-ui版本支持topbar配置项，也可以直接关闭顶部栏：

app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument, {
  swaggerOptions: {
    topbar: false
  }
}));

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