fastapi 无法正常加载可视化API文档界面的/docs网页本地显示

fastapi /docs网页本地显示

/docs因为网络原因，访问空白，自定义swagger_ui，
让swagger-ui.css和swagger-ui-bundle.js等静态资源从本地进行加载，可解决问题，并且可无网络访问

1 查看fastapi源文件

def get_swagger_ui_html(
    *,
    openapi_url: str,
    title: str,
    swagger_js_url: str = "https://cdn.jsdelivr.net/npm/swagger-ui-dist@5.9.0/swagger-ui-bundle.js",
    swagger_css_url: str = "https://cdn.jsdelivr.net/npm/swagger-ui-dist@5.9.0/swagger-ui.css",
    swagger_favicon_url: str = "https://fastapi.tiangolo.com/img",
    oauth2_redirect_url: str | None = None,
    init_oauth: Dict[str, Any] | None = None,
    swagger_ui_parameters: Dict[str, Any] | None = None
) -> HTMLResponse

通过函数传递的参数值可以看出，默认的swagger_js_url和swagger_css_url使用了网络地址，所以可以从这里入手进行改造。

2 下载swagger_js_url和swagger_css_url对应的资源文件，然后将它们放到static文件夹之下。

3 挂载相关静态资源文件，设置读取路径并自定义访问docs路由

import pathlib
from fastapi import FastAPI
from fastapi.openapi.docs import (get_redoc_html, get_swagger_ui_html, get_swagger_ui_oauth2_redirect_html,)
from fastapi.staticfiles import StaticFiles

# 重置docs_url 
app = FastAPI(docs_url=None)  

# 挂载相关静态资源文件     
app.mount("/static", StaticFiles(directory=f"{pathlib.Path.cwd()}/static"), name="static")

# 修改静态资源文件获取地址
@app.get('/docs', include_in_schema=False)
async def custom_swagger_ui_html():
    return get_swagger_ui_html(
        openapi_url=app.openapi_url,
        title=app.title + " - Swagger UI",
        oauth2_redirect_url= app.swagger_ui_oauth2_redirect_url,
        swagger_js_url="/static/swagger-ui-bundle.js",
        swagger_css_url="/static/swagger-ui.css",
        swagger_favicon_url="https://fastapi.tiangolo.com/img/favicon.png"
    )

@app.get('/root')
def root():
    return "hello world"

if __name__ == '__main__':
    import uvicorn
    uvicorn.run(app='fast:app', reload=True)

4 步骤4 启动服务，然后查看浏览器请求信息(打开浏览器，按下F12键)，此时会发现swagger_js_url和swagger_css_url已经默认从本地加载了