如何使用fastapi服务flutter-web项目并集成Swagger？

Question

我正在尝试提供一个网络应用程序。它是使用 Flutter-web 构建的前端，以及 fastapi 构建于 Uvicorn 之上的后端。我还集成了 Swagger API 文档，使用本地下载的 Swagger 文件，因为我想离线使用 Swagger。

（这是我的项目结构）

我在提供 HTML 网页时遇到麻烦，因为我不断收到 404。

我尝试使用以下方式访问索引页面：

localhost:9100/

但是，我得到了 404。 如果我将

app.mount

更改为如下所示：

app.mount("/", StaticFiles(directory="static",html=True))

，我可以加载 HTML 网页，但是 API 和 Swagger 都不起作用。

app = FastAPI(debug=True,docs_url=None,redoc_url=None)
app.mount("/static", StaticFiles(directory="static",html=True))

@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",
    )

@app.post("/start")
def start_app(s:String):
       return JSONResponse(status_code=status.HTTP_400_BAD_REQUEST, content={ "data": "test"})
                                                                             
   

我在这里缺少什么？

Answer 1

我找到了一种方法来让以下所有内容一起工作：

• API
• 网页
• 本地提供的 Swagger 文档

解决方案：

将index.html中的以下行更改为这样，保留上述所有代码：

<base href="/static/">

这将允许您使用以下方式访问上述网页：

localhost:port/static/login

Swagger 文档使用：

localhost:port/docs

我希望让网页也能直接工作，而无需 URL 中的静态部分，但这是我能实现的最好结果。