Django + React The resource was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)

Question

Developing a django app with frontend react and serving the react build files with django. project structure is as everything works fine when in settings.py I have

DEBUG=True

However when I change it to DEBUG=False i get the following errors for static files in the console

The resource from “http://localhost:8000/static/js/2.285a2b2f.chunk.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

The resource from “http://localhost:8000/static/css/main.dde91409.chunk.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

The resource from “http://localhost:8000/static/js/main.eade1a0b.chunk.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

The resource from “http://localhost:8000/static/css/2.03372da4.chunk.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

The resource from “http://localhost:8000/static/js/2.285a2b2f.chunk.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

in my setting.py file I have also set the following

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')

Everything works fine except when DJango DEBUG is False Please can someone help me since I dont want to deploy the app with DEBUG=True

Answer 1

For anyone coming here from Google, you should probably see this question.

In summary, when Debug is off Django stops handling static files for you. Your production server should deal with this instead.

If you still want to run your server locally, you should use:

./manage.py runserver --insecure

This is obviously not secure in production, hence its name.

Answer 2

After googling here and there, I realized that Heroku was running the script

python manage.py collectstatic

but not finding any static files for my react app because I had not committed the react build folder to git.

so adding the build folder to git and committing the changes made it work properly.