FastAPI Swagger UI 无法打开问题解决方案

FastAPI Swagger UI 无法打开问题解决方案

FastAPI自动文档SwaggerUI打不开显示空白 项目地址: https://gitcode.com/Resource-Bundle-Collection/d7a7a

简介

在使用 FastAPI 框架时，可能会遇到 Swagger UI 无法打开的问题，表现为页面显示空白。本文档提供了一个解决方案，帮助你解决这个问题。

问题描述

在某些情况下，FastAPI 的 Swagger UI 和 Redoc 可能无法正常打开，页面显示空白。这通常是由于请求的静态资源文件加载失败导致的。

解决方案

1. 下载文件

首先，你需要从 GitHub 上下载所需的静态资源文件。这些文件包括

swagger-ui.css

和

swagger-ui-bundle.js

。你可以从以下地址下载这些文件：

• swagger-ui-dist
• redoc

2. 修改代码引用

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

1. 打开 FastAPI 安装目录下的 fastapi/openapi/docs.py 文件。
2. 找到以下代码并注释掉： swagger_js_url: str = "https://cdn.jsdelivr.net/npm/swagger-ui-dist@4/swagger-ui-bundle.js"swagger_css_url: str = "https://cdn.jsdelivr.net/npm/swagger-ui-dist@4/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"

3. 添加静态文件目录

最后，在主程序中添加静态文件目录：

from starlette.staticfiles import StaticFiles

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

验证

完成上述步骤后，重新启动 FastAPI 应用，再次访问 Swagger UI 和 Redoc 页面，应该可以正常显示了。

总结

通过下载所需的静态资源文件并修改代码中的引用路径，可以有效解决 FastAPI Swagger UI 无法打开的问题。希望这个解决方案对你有所帮助。

FastAPI自动文档SwaggerUI打不开显示空白 项目地址: https://gitcode.com/Resource-Bundle-Collection/d7a7a