FastAPI Swagger 本地化

一、问题描述

在使用 FastAPI 框架时，可能会遇到 Swagger UI 无法打开的问题，表现为页面显示空白，这通常是由于请求的静态资源文件加载失败导致的

二、解决方案

将swagger本地化部署来解决无法访问的问题

2.1下载swagger的发布文件

下载地址：swagger-ui-dist redoc

2.2 修改代码引用

下载文件后，你需要修改 FastAPI 代码中的引用路径，将默认的 CDN 链接替换为本地文件路径。具体步骤如下：

1、打开 FastAPI 安装目录下的 fastapi/openapi/docs.py 文件
2、找到以下代码并注释掉：
    swagger_js_url: str = "https://cdn.jsdelivr.net/npm/swagger-ui-dist@5/swagger-ui-bundle.js"
    swagger_css_url: str = "https://cdn.jsdelivr.net/npm/swagger-ui-dist@5/swagger-ui.css"
    swagger_favicon_url: str = "https://fastapi.tiangolo.com/img/favicon.png"
3、将上述代码替换为本地文件路径：
    swagger_js_url: str = "/static/swagger-ui/swagger-ui-bundle.js"
    swagger_css_url: str = "/static/swagger-ui/swagger-ui.css"
    swagger_favicon_url: str = "/static/swagger-ui/favicon-32x32.png"
4、同样地，注释掉 Redoc 的默认引用：
    redoc_js_url: str = "https://cdn.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.js"
    redoc_favicon_url: str = "https://fastapi.tiangolo.com/img/favicon.png"
5、替换为本地文件路径：
    redoc_js_url: str = "/static/redoc/bundles/redoc.standalone.js"
    redoc_favicon_url: str = "/static/redoc/favicon.png"

2.3 添加静态文件目录

在程序主目录添加 static/swagger-ui 目录，并将下载的swagger中dist下文件拷贝到该目录，最后，在主程序中添加静态文件目录：

  from starlette.staticfiles import StaticFiles
  # 先引用包
  app.mount('/static', StaticFiles(directory='static'), name='static')