MIME 类型 (\'text/html\') 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查 - DJANGO + REACTJS App答案

【问题标题】：MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled - DJANGO + REACTJS AppMIME 类型 (\'text/html\') 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查 - DJANGO + REACTJS App
【发布时间】：2023-02-13 22:08:31
【问题描述】：

我有一个已部署的 django + reactjs 应用程序数字海洋应用平台.我正在使用 reactjs 的命令 npm rub build 制作的生产版本，并使用 django 为它提供服务。我正在使用 digitalocean 空间来存储和提供静态和媒体文件。

现在部署后，我在控制台中收到以下错误：

Refused to apply style from 'https://solvelitigation.com/static/css/main.e8b3c255.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Refused to apply style from 'https://solvelitigation.com/static/css/main.e8b3c255.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

efused to execute script from 'https://solvelitigation.com/static/js/main.a796034b.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Manifest: Line: 1, column: 1, Syntax error.

Refused to apply style from 'https://solvelitigation.com/static/css/main.e8b3c255.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

由于上述错误，页面中没有呈现任何内容。

我不知道为什么会这样，也不知道如何解决。请向我建议如何解决这个问题。

我已经尝试了一些来自 SO 的解决方案，但似乎没有一个对我有用。当我也尝试从本地主机运行应用程序时，我遇到了同样的错误。

以下是我的设置

cdn/conf.py（我在其中配置了我的空间设置）

AWS_ACCESS_KEY_ID= os.environ.get("AWS_ACCESS_KEY_ID")

AWS_SECRET_ACCESS_KEY= os.environ.get("AWS_SECRET_ACCESS_KEY")

AWS_STORAGE_BUCKET_NAME = "bucket name"

AWS_S3_ENDPOINT_URL="endpoint"

AWS_DEFAULT_ACL = 'public-read'

AWS_S3_OBJECT_PARAMETERS = {
    "CacheControl":"max-age=86400",
}

AWS_LOCATION = f"location of the bucket"

STATIC_URL = f'{AWS_S3_ENDPOINT_URL}/static/'

MEDIA_URL =  f'{AWS_S3_ENDPOINT_URL}/media/'

DEFAULT_FILE_STORAGE = "solvelitigation_back.cdn.backends.MediaRootS3Boto3Storage"

STATICFILES_STORAGE = "solvelitigation_back.cdn.backends.StaticRootS3Boto3Storage"

设置.py（其中正在按以下方式导入）

from .cdn.conf import (
AWS_ACCESS_KEY_ID,
AWS_SECRET_ACCESS_KEY,
AWS_STORAGE_BUCKET_NAME,
AWS_S3_ENDPOINT_URL,
AWS_DEFAULT_ACL,
AWS_S3_OBJECT_PARAMETERS,
AWS_LOCATION,
STATIC_URL,
MEDIA_URL,
DEFAULT_FILE_STORAGE,
STATICFILES_STORAGE,
)


AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY
AWS_STORAGE_BUCKET_NAME
AWS_S3_ENDPOINT_URL
AWS_DEFAULT_ACL
AWS_S3_OBJECT_PARAMETERS
AWS_LOCATION
STATIC_URL
MEDIA_URL
DEFAULT_FILE_STORAGE
STATICFILES_STORAGE

STATIC_ROOT = BASE_DIR / 'staticfiles' 

MEDIA_ROOT = BASE_DIR / 'mediafiles'

STATICFILES_DIRS = [
        BASE_DIR / 'build/static',
    ]

网址.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('account/',include('account.urls')),
    path('civil/',include('civil.urls')),
    path('criminal/',include('criminal.urls')),
    path('corporate/',include('corporate.urls')),
    path('service/',include('service.urls')),
    path('taxation/',include('taxation.urls')),
]
urlpatterns += static(settings.STATIC_URL,
                          document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL,
                          document_root=settings.MEDIA_ROOT)


# This is will cath the routes in the frontend and 404 errors
urlpatterns += [re_path(r'^.*', TemplateView.as_view(template_name='index.html'))]

索引.html这是来自 React 的 html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/static/images/favicon-icon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

【问题讨论】：

标签： reactjs django digital-ocean mime-types django-staticfiles

【解决方案1】：

安装白噪声

pip install whitenoise

添加中间件

MIDDLEWARE = [
    "whitenoise.middleware.WhiteNoiseMiddleware",
]

【讨论】：