在FastAPI上挂载Dash应用遇静态资源404问题求助

问题描述 #

我尝试通过以下代码在FastAPI上运行Dash应用：

from dash import Dash, dcc, html, Input, Output
from flask import session, redirect, request, url_for, Response, Flask
from fastapi import FastAPI
import uvicorn
from fastapi.middleware.wsgi import WSGIMiddleware

dash_app = Dash(__name__, server=Flask(__name__))

dash_app.layout = html.Div('layout things ...')

@dash_app.callback(
    Output("e_graph", "figure"),
    Input("dropdown", "value"), )

@dash_app.server.route("/", methods=["GET", "POST"])

def update_graph(dropdown_, data=data):
    # update logic 
    return fig

app = FastAPI()

app.mount("/v1", WSGIMiddleware(dash_app.server))

if __name__ == "__main__":
    uvicorn.run('main:app', port=8000, host="127.0.0.1", reload=True, debug=True)

运行后出现大量静态资源404错误：

127.0.0.1:56043 - GET /_dash-component-suites/dash/deps/polyfill%407.v2_5_1m1655745108.12.1.min.js HTTP/1.1 404 Not Found
127.0.0.1:56044 - GET /_dash-component-suites/dash/deps/react%4016.v2_5_1m1655745108.14.0.min.js HTTP/1.1 404 Not Found
127.0.0.1:56043 - GET /_dash-component-suites/dash/dcc/dash_core_components-shared.v2_5_0m1655745108.js HTTP/1.1 404 Not Found
127.0.0.1:56048 - GET /_dash-component-suites/dash/deps/react-dom%4016.v2_5_1m1655745108.14.0.min.js HTTP/1.1 404 Not Found
127.0.0.1:56051 - GET /_dash-component-suites/dash/dcc/dash_core_components.v2_5_0m1655745108.js HTTP/1.1 404 Not Found
127.0.0.1:56049 - GET /_dash-component-suites/dash/deps/prop-types%4015.v2_5_1m1655745108.8.1.min.js HTTP/1.1 404 Not Found
127.0.0.1:56050 - GET /_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_5_1m1655745108.min.js HTTP/1.1 404 Not Found
127.0.0.1:56044 - GET /_dash-component-suites/dash/html/dash_html_components.v2_0_3m1655745108.min.js HTTP/1.1 404 Not Found

Dash挂载到Flask后无法访问所需静态资源，想问有没有人成功实现过这种挂载方式。

解决方案 #

问题核心是Dash的静态资源路径未匹配FastAPI的挂载前缀。当Dash被挂载到/v1路径下时，它生成的资源请求仍指向根路径/，导致FastAPI无法定位资源。通过以下两步可解决：

1. 配置Dash的请求路径前缀 #

初始化Dash时，指定requests_pathname_prefix参数，值为FastAPI的挂载路径（末尾需加斜杠），让Dash生成的所有资源请求都带上该前缀。

2. 分离Flask路由与Dash回调 #

原代码中将Flask根路由/与Dash回调绑定到同一函数，导致路由逻辑混乱，需分开定义。

修改后的完整代码：

from dash import Dash, dcc, html, Input, Output
from flask import Flask
from fastapi import FastAPI
import uvicorn
from fastapi.middleware.wsgi import WSGIMiddleware

# 单独初始化Flask应用
flask_app = Flask(__name__)

# 初始化Dash，指定请求前缀和绑定的Flask服务
dash_app = Dash(
    __name__,
    server=flask_app,
    requests_pathname_prefix="/v1/"  # 匹配FastAPI的挂载路径
)

# 完善布局（补充原代码缺失的组件）
dash_app.layout = html.Div([
    dcc.Dropdown(id="dropdown", options=[{"label": "选项1", "value": "opt1"}], value="opt1"),
    dcc.Graph(id="e_graph")
])

# 独立定义Dash回调函数
@dash_app.callback(
    Output("e_graph", "figure"),
    Input("dropdown", "value")
)
def update_graph(dropdown_value):
    # 示例更新逻辑
    return {
        "data": [{"x": [1,2,3], "y": [4,5,6], "type": "bar"}],
        "layout": {"title": f"已选: {dropdown_value}"}
    }

# 挂载Flask应用到FastAPI
app = FastAPI()
app.mount("/v1", WSGIMiddleware(flask_app))

if __name__ == "__main__":
    uvicorn.run('main:app', port=8000, host="127.0.0.1", reload=True, debug=True)

关键注意事项 #

• 访问Dash应用时需用路径http://127.0.0.1:8000/v1/，而非根路径。
• requests_pathname_prefix的末尾必须加斜杠，否则资源路径仍会出错。

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