Swagger-UI-Express在Azure App Service访问/api-docs返回404问题

1 修正Swagger服务地址配置 #

你当前的服务urls配置放在info字段下不符合OpenAPI规范，属于无效配置，需调整为顶层的servers字段，同时补充信任代理配置适配Azure的反向代理机制，完整修改后的代码如下：

// 首先在Express实例定义后添加信任代理配置
const express = require('express');
const app = express();
// 新增以下行，适配Azure反向代理
app.set('trust proxy', 1);

const swaggerOptions = {
  swaggerDefinition: {
    openapi: '3.0.0', // 新增指定OpenAPI版本
    info: {
      version: "1.0.0",
      title: "My API",
      description: "My API Information",
      contact: {
        name: "My Name - my.name@email.com"
      }
    },
    // 把urls移到顶层的servers数组下
    servers: [
      {"url":"http://localhost:3000", "description": "Development server"},
      {"url":"https://myapp.azurewebsites.net", "description": "Production server"}
    ]
  },
  apis: ["server.js"]
};

const swaggerDocs = swaggerJsDoc(swaggerOptions);
// 给swaggerUi.setup添加explorer参数，支持多服务切换
app.use("/api-docs", swaggerUi.serve, swaggerUi.setup(swaggerDocs, { explorer: true }));

2 检查Azure托管环境配置 #

• 如果你使用Windows环境托管Node.js应用，需确认根目录下的web.config配置中重写规则未拦截/api-docs路径，正确的重写规则应将所有请求转发到Node.js入口文件，示例重写配置片段：

<rule name="app" enabled="true" patternSyntax="ECMAScript" stopProcessing="true">
  <match url="iisnode.+" negate="true" />
  <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
  <action type="Rewrite" url="server.js" />
</rule>

• 如果你使用Linux环境托管，需确认应用配置中的启动命令正确指向你的入口文件，例如node server.js。

3 访问验证 #

部署修改后的代码后，直接访问 https://myapp.azurewebsites.net/api-docs 即可正常加载Swagger UI，无需额外加端口号。

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