Отказано в выполнении скрипта ... MIME-тип ('text/html') не является исполняемым, а строгая проверка MIME-типа включена -- django reactjs whitenoise heroku
В настоящее время я занимаюсь развертыванием (читай: борюсь) моего приложения: django (backend) react-js/redux (frontend) django-ninja (api) whitenoise (backend - staticfiles) на heroku. однако я продолжаю получать это сообщение об ошибке всякий раз, когда запускаю приложение и запускаю прямой эфир:
"Refused to execute script from 'https://off-world-v0.herokuapp.com/static/js/main.6b71531f.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled."
"Manifest: Line: 1, column: 1, Syntax error."
Эта ошибка НЕ появляется, когда я в разработке, поэтому, проведя последние 2 дня в stackoverflow, reddit, youtube и др. - несколько других людей, похоже, столкнулись с той же проблемой, но никакого надежного ответа (насколько мне известно) на данный момент не было предложено. Самое странное, что приложение заработало с одной попытки после того, как я удалил эту строку из сборки/статического файла "index.html":
<link rel="manifest" href="./manifest.json"/>
Однако после обновления и повторного запуска приложения те же ошибки вернулись, на этот раз с другим активом staticfile в качестве источника ошибки.
Ниже прикреплены некоторые фрагменты моего кода. Любое понимание или помощь будут высоко оценены и будут сопровождаться подарками/трибутами/милостыней/щедротами по вашему выбору, которые будут доставлены в загробной жизни.
django settings.py
django urls.py
from django.contrib import admin
from django.urls import path, include, re_path
from django.conf.urls.static import static
from django.conf import settings
from django.views.generic import TemplateView
from . api import api
urlpatterns = [
path('admin/', admin.site.urls),
path('api/', api.urls),
]
urlpatterns += static(settings.STATIC_URL,
document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL,
document_root=settings.MEDIA_ROOT)
# This is will catch the routes in the frontend and 404 errors
urlpatterns += [re_path(r'^.*', TemplateView.as_view(template_name='index.html'))]
django-ninja api
router = Router()
class Assets(View):
def get(self, _request, filename):
path = os.path.join(os.path.dirname(__file__), 'static', filename)
if os.path.isfile(path):
with open(path, 'rb') as file:
return HttpResponse(file.read(), content_type='application/javascript')
else:
return HttpResponseNotFound()
@router.post("/register")
def register(request, reg: RegistrationSchema):
try:
user = User.objects.create_user(reg.username, reg.email, reg.password)
except IntegrityError:
raise HttpError(409, "User already registered.")
except Exception as error:
print('\n')
print(traceback.format_exc())
print('\n')
raise HttpError(422, f"{error}")
else:
if user and user.is_authenticated:
user.firstname = reg.firstname.capitalize()
user.lastname = reg.lastname.capitalize()
user.phone = reg.phone
user.dob = reg.dob
user.gender = reg.gender
user.passcode = reg.passcode
user.save()
_, token = AuthToken.objects.create(user)
#return {'user': user.username, 'token': token}
return 200, UserAuthSchema(user=user, token_key=token)
raise HttpError(405, "User registration not permitted or failed.")
@router.post("/login", response=AuthSchema)
def login(request, login: LoginSchema):
user = authenticate(request, username=login.username, password=login.password)
if user and user.is_authenticated:
_, token = AuthToken.objects.create(user)
#return {'user': user, 'token': token}
return 200, UserAuthSchema(user=user, token_key=token)
raise HttpError(401, "Incorrect login credentials.")
@router.get("/auth")
def auth(request):
if 'Authorization' in request.headers:
auth_header = request.headers.get('Authorization')
token = auth_header.split()[1]
try:
user, token = TokenAuth().authenticate(token=token)
return 200, UserAuthSchema(user=user, token_key=token)
except Exception as error:
raise HttpError(403, "User is not authenticated.")
else:
print("Authorization not in headers.")
raise HttpError(401, "User is not authenticated.")
@router.get("/logout")
def logout(request):
if 'Authorization' in request.headers:
auth_header = request.headers.get('Authorization')
token = auth_header.split()[1]
try:
AuthToken.objects.filter(token_key=token[:CONSTANTS.TOKEN_KEY_LENGTH]).delete()
except Exception as error:
raise HttpError(405, f"{error}")
else:
return Response("User has been logged out.", status=205)
else:
print("Authorization not in headers.")
raise HttpError(412, "Authorization token not in headers.")
react-js frontend build/static index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="icon" href="./favicon.ico"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="theme-color" content="#000000"/>
<meta name="description" content="Web site created using create-react-app"/>
<link rel="apple-touch-icon" href="./logo192.png"/>
<link rel="manifest" href="./manifest.json"/>
<title>React App</title>
<script defer="defer" src="./static/js/main.7f6621dd.js"></script>
<link href="./static/css/main.864aa364.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
react-js frontend build/static manifest.json
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "./",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
react-js frontend package.json
{
"name": "frontend",
"version": "0.1.0",
"homepage": ".",
"private": true,
"proxy": "http://localhost:8000",
"dependencies": {
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@fontsource/vt323": "^4.5.10",
"@mui/material": "^5.10.6",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"formik": "^2.2.9",
"notistack": "^2.0.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-error-boundary": "^3.1.4",
"react-redux": "^8.0.2",
"react-router-dom": "^6.4.0",
"react-scripts": "5.0.1",
"redux": "^4.2.0",
"redux-devtools-extension": "^2.13.9",
"redux-form": "^8.3.8",
"redux-thunk": "^2.4.1",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.4",
"yup": "^0.32.11"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"engines": {
"node": "16.14.1",
"npm": "8.5.0"
}
}
react-js frontend public index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
react-js frontend public manifest.json
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
каталог папки приложения каталог папок приложений
