CODEWITHSUNDEEP
pythondjangoreactjs
Richard Ochom
Richard Ochom

Reputation: 556

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

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

Upvotes: 11

Views: 12780

Answers (4)

Adnan Sh
Adnan Sh

Reputation: 99

credit to @stathoula , following her answer along with remark of @leopd by adding re_path to her answer, this worked for me by appending below code to the main urls.py at the end of all the rest of the code just add :

from django.urls import re_path
from django.views.static import serve


urlpatterns += (
re_path(r'^media/(?P<path>.*)$', serve,{'document_root': settings.MEDIA_ROOT}),
re_path(r'^static/(?P<path>.*)$', serve,{'document_root': settings.STATIC_ROOT}),
)

then do "collectstatic":

python manage.py collectstatic

Upvotes: 1

Bambier
Bambier

Reputation: 856

Make sure You have address static files correctly also make sure you have been added / in end of directory in my case I forgot to add / to end of /usr/share/nginx/html/static/ and nginx thinks that /usr/share/nginx/html/static/ is file not a directory

location /static/ {
    alias /usr/share/nginx/html/static/;
    access_log off;
    error_log off;
    autoindex off;
    }

Upvotes: 0

sebtheiler
sebtheiler

Reputation: 2557

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.

Upvotes: 13

Richard Ochom
Richard Ochom

Reputation: 556

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.

Upvotes: 2

Related Questions