Блог

Главная - Вопросы по программированию - Vue.js и проблема с типом django MIME

Vue.js и проблема с типом django MIME

#javascript #django #vue.js #heroku #mime-types

#javascript #django #vue.js #heroku #mime-типы

Вопрос:

Я развертываю heroku a vue.js приложение, вложенное в проект django. Я следовал этому руководству дословно

https://medium.com/@williamgnlee/simple-integrated-django-vue-js-web-application-configured-for-heroku-deployment-c4bd2b37aa70

Сборка в heroku завершается успешно, и веб-сайт загружается — например, часть API рассматриваемого сайта полностью доступна для просмотра.

https://heseltime.herokuapp.com/api_example/

Но я не могу получить доступ к vue.js приложение, потому что есть проблема с типом MIME. Журнал ошибок:

 The resource from “https://heseltime.herokuapp.com/static/css/app.48175cc56e52e020bf178616c0977374.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

https://heseltime.herokuapp.com / находится там, где vue.js предполагается, что так и должно быть, согласно urls.py в моем проекте django

 from django.contrib import admin
from django.urls import path, include

from django.views.generic import TemplateView
from django.conf.urls import url

urlpatterns = [
    path('admin/', admin.site.urls),
    url(r'^$', TemplateView.as_view(template_name='index.html')),
    path('api_example', include('api_example.urls')),
]

Когда я подключаюсь к стороне heroku по ssh, я нахожу файлы в правильном расположении staticfiles в соответствии с моим settings.py из джанго

 # https://docs.djangoproject.com/en/3.1/howto/static-files/

STATIC_URL = '/static/'

STATICFILES_DIRS = [
  os.path.join(BASE_DIR, 'dist/static'),
]

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

CORS_ORIGIN_ALLOW_ALL = False

HTML-код веб-сайта загружается как

 
<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name=viewport content="width=device-width,initial-scale=1">
    <title>heseltime</title>
    <link href=/static/css/app.48175cc56e52e020bf178616c0977374.css rel=stylesheet>
</head>
<body>
    <div id=app></div>
    <script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script>
    <script type=text/javascript src=/static/js/vendor.7e9567d6dec21d8821f2.js></script>
    <script type=text/javascript src=/static/js/app.f5b30ee15ad2f9646708.js></script>
</body>
</html>

Для меня это выглядит хорошо (?) — Может ли это быть проблемой CORSHeaders?

Комментарии:

1. запросы для всех ваших css и js приводят к не найдено — очевидно, сервер отправляет html-ответ с сообщением «файл не найден», из-за чего несоответствие типа mime — проблема в том, что эти файлы не существуют, ничего общего с CORS, поскольку запрос имеет то же происхождение

2. спасибо, вы были правы. Проблема также была вызвана отсутствием промежуточного программного обеспечения для белого шума. (забыл добавить в промежуточное ПО в settings.py . как только эта строка будет добавлена, staticfiles/ будут правильно доступны.)