在Docker Compose堆栈中使用django-plotly-dash时的MIME类型错误

前端开发 2026-07-09

我有一个Django应用,想把Dash集成进来。它是一个Nginx、Django和 Postgres的 Docker Compose堆栈。
不过我在浏览器控制台中遇到了一个错误:

Refused to execute script from 'http://localhost:8008/trendyqc/django_plotly_dash/app/Plot/_dash-component-suites/plotly/package_data/plotly.min.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

settings.pyfile:

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "trend_monitoring",
    "django_bootstrap5",
    "django_plotly_dash.apps.DjangoPlotlyDashConfig",
    "dpd_static_support",
]

MIDDLEWARE = [
    "django.middleware.security.SecurityMiddleware",
    "django.contrib.sessions.middleware.SessionMiddleware",
    "django.middleware.common.CommonMiddleware",
    "django.middleware.csrf.CsrfViewMiddleware",
    "django.contrib.auth.middleware.AuthenticationMiddleware",
    "django.contrib.messages.middleware.MessageMiddleware",
    "django.middleware.clickjacking.XFrameOptionsMiddleware",
    "debug_toolbar.middleware.DebugToolbarMiddleware",
    "django_plotly_dash.middleware.BaseMiddleware",
    "django_plotly_dash.middleware.ExternalRedirectionMiddleware",
]

X_FRAME_OPTIONS = "SAMEORIGIN"

STATICFILES_FINDERS = [
    "django.contrib.staticfiles.finders.FileSystemFinder",
    "django.contrib.staticfiles.finders.AppDirectoriesFinder",
    "django_plotly_dash.finders.DashAssetFinder",
    "django_plotly_dash.finders.DashComponentFinder",
    "django_plotly_dash.finders.DashAppDirectoryFinder",
]
PLOTLY_COMPONENTS = [
    # Common components (ie within dash itself) are automatically added
    # django-plotly-dash components
    "dpd_components",
    # static support if serving local assets
    "dpd_static_support",
    # Other components, as needed
    "dash_bootstrap_components",
]

至于应用,我已经从Dash文档中拷贝了一个示例:

from dash import dcc, html, Input, Output, callback
import dash_bootstrap_components as dbc
from django_plotly_dash import DjangoDash
import plotly.express as px

import pandas as pd

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv"
)

app = DjangoDash(
    "Plot",
    external_stylesheets=[dbc.themes.BOOTSTRAP],
    add_bootstrap_links=True,
)

app.layout = html.Div(
    [
        dcc.Graph(id="graph-with-slider"),
        dcc.Slider(
            df["year"].min(),
            df["year"].max(),
            step=None,
            value=df["year"].min(),
            marks={str(year): str(year) for year in df["year"].unique()},
            id="year-slider",
        ),
    ]
)


@callback(Output("graph-with-slider", "figure"), Input("year-slider", "value"))
def update_figure(selected_year):
    filtered_df = df[df.year == selected_year]

    fig = px.scatter(
        filtered_df,
        x="gdpPercap",
        y="lifeExp",
        size="pop",
        color="continent",
        hover_name="country",
        log_x=True,
        size_max=55,
    )

    fig.update_layout(transition_duration=500)

    return fig

我正在使用:

Django==6.0.4
django-bootstrap5==26.2
django-plotly-dash==2.5.0
dpd-static-support==0.0.5

滑块可以正常工作,但图形组件却不起作用。

解决方案

Django的 runserver命令可能对静态资源使用了不正确的内容类型。之所以这样,是因为Django依赖Python标准库中的mimetypes模块,而该模块又依赖底层平台的映射文件。

要解决这个问题,可以通过在settings.py中添加以下设置来强制.js文件的MIME类型:

import mimetypes

mimetypes.add_type("application/javascript", ".js", True)

你也可以尝试修复操作系统的配置。如果你发现某些文件的内容类型不正确,很可能是平台的映射文件有问题或需要更新。举例来说:

  • 在Red Hat发行版上,安装或更新mailcap软件包。
  • 在Debian发行版上,安装或更新mime-support软件包。
  • 在Windows操作系统上,编辑Windows注册表中的HKEY_CLASSES_ROOT键。
站内所有文章版权归属LeftHeroAI导航站,无授权禁止任何主体转载、抄袭、复制内容,亦不得私自架设镜像站点。一经侵权,本站将通过法律途径追责。

相关文章