Django + React 由于 MIME 类型（“text/html”）不匹配（X-Content-Type-Options：nosniff），资源被阻止答案

【问题标题】：Django + React The resource was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)Django + React 由于 MIME 类型（“text/html”）不匹配（X-Content-Type-Options：nosniff），资源被阻止
【发布时间】：2020-10-14 17:44:13
【问题描述】：

使用前端 react 开发 django 应用程序并使用 django 提供 react 构建文件。项目结构在 settings.py 中一切正常，我有

DEBUG=True

但是，当我将其更改为 DEBUG=False 我在控制台中收到以下静态文件错误

资源来自 “http://localhost:8000/static/js/2.285a2b2f.chunk.js”因被阻止与 MIME 类型（“text/html”）不匹配（X-Content-Type-Options: nosniff）。

资源来自 “http://localhost:8000/static/css/main.dde91409.chunk.css”是由于 MIME 类型（“text/html”）不匹配而被阻止 (X-Content-Type-Options: nosniff)。

资源来自 “http://localhost:8000/static/js/main.eade1a0b.chunk.js”是由于 MIME 类型（“text/html”）不匹配而被阻止 (X-Content-Type-Options: nosniff)。

资源来自 “http://localhost:8000/static/css/2.03372da4.chunk.css”是由于 MIME 类型（“text/html”）不匹配而被阻止 (X-Content-Type-Options: nosniff)。

资源来自 “http://localhost:8000/static/js/2.285a2b2f.chunk.js”是由于 MIME 类型（“text/html”）不匹配而被阻止 (X-Content-Type-Options: nosniff)。

在我的 setting.py 文件中，我还设置了以下内容

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS':  [os.path.join(BASE_DIR, 'frontend')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'frontend', "build", "static"),  # update the STATICFILES_DIRS
)

PROJECT_DIR = os.path.dirname(os.path.abspath(__file__))
STATIC_ROOT = os.path.join(PROJECT_DIR, 'static')

除了 DJango DEBUG 为 False 时，一切正常请有人帮助我，因为我不想使用 DEBUG=True 部署应用程序

【问题讨论】：

你将 react JS 文件放在静态文件中而不是构建 API？
我不认为它是这样工作的：通常你会使用纯 django 服务器端渲染或 django REST /GraphQL 作为 API，然后获取数据。但我从未见过在静态文件中强制做出反应的项目......
如果我的问题正确，我的反应代码通过 django-restframework 访问 django，但是我将构建作为模板提供。因为我打算在 django 中托管前端
好吧，我正在使用 DRF 并对数据进行 API 调用，但是在构建之后，我在某处读到我可以在 django 中提供 react 的构建文件。如果 DEBUG=True，它工作正常。当我将它更改为 False 时，probel 会出现
你要部署到哪里？

标签： python django reactjs

【解决方案1】：

对于从 Google 来到这里的任何人，您可能应该看到 this question。

总之，当 Debug 关闭时，Django 会停止为您处理静态文件。您的生产服务器应该处理这个问题。

如果你仍然想在本地运行你的服务器，你应该使用：

./manage.py runserver --insecure

这在生产中显然不安全，因此得名。

【讨论】：

【解决方案2】：

在到处搜索之后，我意识到 Heroku 正在运行脚本

python manage.py collectstatic

但没有为我的 react 应用找到任何静态文件，因为我没有将 react 构建文件夹提交给 git。

因此将构建文件夹添加到 git 并提交更改使其正常工作。

【讨论】：