如何在Azure静态Web应用中修改swagger.json的URL

方法1：修改Azure函数的Swagger配置（推荐） #

如果你的Azure函数使用Swashbuckle生成Swagger文档，直接在Swagger配置中添加相对路径的Server节点，让Swagger UI基于当前域名请求swagger.json：

在函数项目的Startup.cs或Program.cs中，调整AddSwaggerGen的配置：

services.AddSwaggerGen(c =>
{
    c.SwaggerDoc("v1", new OpenApiInfo { Title = "你的API名称", Version = "v1" });
    // 添加相对路径的Server配置，让Swagger UI使用当前域名的/api路径
    c.AddServer(new OpenApiServer { Url = "/api" });
});

部署修改后的函数，Swagger UI会自动以当前静态Web应用域名的/api路径作为基础加载swagger.json，避免跨域请求。

方法2：配置静态Web应用的路由规则 #

在静态Web应用的根目录下创建或修改staticwebapp.config.json，添加路由规则确保swagger相关请求正确转发：

{
  "routes": [
    {
      "route": "/api/swagger/{*path}",
      "rewrite": "/api/swagger/{path}"
    }
  ]
}

这个规则会将所有/api/swagger/开头的请求正确路由到后端Azure函数，同时让Swagger UI识别当前域名作为请求来源。

方法3：自定义Swagger UI页面的初始化路径 #

如果是自行部署的Swagger UI页面（而非Swashbuckle自动生成的），修改页面中的swagger.json请求路径为相对路径：

<script>
  const ui = SwaggerUIBundle({
    url: '/api/swagger/v1/swagger.json', // 替换为相对路径，而非函数的绝对URL
    dom_id: '#swagger-ui',
    presets: [
      SwaggerUIBundle.presets.apis,
      SwaggerUIStandalonePreset
    ]
  });
</script>

这样页面会从当前域名的/api路径加载swagger.json，彻底避免跨域问题。

额外注意事项 #

• 部署修改后，确保静态Web应用和Azure函数都完成重新部署，配置才能生效。
• 若仍有CORS问题，检查Azure函数的CORS设置，确保包含静态Web应用的域名（使用相对路径后通常无需额外配置，但生产环境建议明确指定允许的域名）。

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