Веб-приложение Django было заблокировано из-за несоответствия типа MIME ("text/html")

Я пытаюсь создать веб-приложение на Django с фронтендом, сделанным на Vue.js.

Вот как организован мой дир -

reco_system_app/urls.py
reco_system_app/settings.py

recommender/urls.py
recommender/views.py

vueapp/
static/
templates/

reco_system_app/urls.py является

from django.contrib import admin
from recommender.views import home
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('recommender.urls')),
    path('', home, name='home'),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

settings.py имеет эти два набора

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

recommender/urls.py является

from django.urls import path
from . import views

urlpatterns = [
    path('', views.IndexView.as_view(), name='index'),
    path('movies/', views.get_random_movies, name='get_random_movies'),
    path('recommend/', views.get_recommendations, name='get_recommendations'),
]

view.py является

import random
from django.shortcuts import render
from django.views.generic import TemplateView
from django.http import JsonResponse

class IndexView(TemplateView):
    template_name = 'index.html'

def home(request):
    return render(request, "index.html")

def get_random_movies(request):
    # Simulate a list of movies
    sample_movies = ["The Shawshank Redemption", "The Godfather", "The Dark Knight", "Pulp Fiction", "The Lord of the Rings: The Return of the King"]
    # Return a random sample of 5 movies
    movies = random.sample(sample_movies, 3)
    return JsonResponse({"movies": movies})

def get_recommendations(request):
    # For simplicity, assume the movies are passed as a comma-separated string in the query parameter
    selected_movies = request.GET.get('movies', '')
    selected_movies_list = selected_movies.split(',')

    # Simulate recommendations by shuffling the input movies
    random.shuffle(selected_movies_list)
    recommendations = selected_movies_list  # In a real scenario, you'd query VertexAI here

    return JsonResponse({"recommendations": recommendations})

Мой фронтенд, созданный с помощью Vue.js, работает нормально. Когда я запускаю npm run serve, я могу видеть фронтенд, который я создал.

Сервер Django также работает, я думаю, когда я запускаю python manage.py runserver 0.0.0.0:8000, сервер работает, и я могу сделать curl http://0.0.0.0:8000/api/movies/, чтобы получить список фильмов.

Но Django не открывает внешнюю веб-страницу, которую я хочу увидеть. Когда я осматриваю страницу, я вижу ошибки,

The resource from “http://0.0.0.0:8000/js/app.d193da3f.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
The resource from “http://0.0.0.0:8000/js/chunk-vendors.5c940eb9.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

Я убедился, что файлы, которые я собираю с помощью npm run build, находятся в правильных местах. Но я все равно получаю ошибку.

Я запускаю все это внутри контейнера docker с

docker run -it --entrypoint /bin/sh -v ${PWD}:/workspace -p 8080:8080 -p 8000:8000 recommendation

Оба порта также открыты в Dockerfile. Что может быть не так?

EDIT: DEBUG = True также установлен.

Вернуться на верх