Я получаю ошибку типа mime при подключении моего приложения react (через vite.js) к фреймворку django
Недавно я начал делать веб-приложение с помощью React и Django. Я установил react с vite.js (потому что он кажется таким быстрым в среде разработки). и я подключил его к Django web framework и запустил его. и я думал, что он покажет основную страницу react (вы знаете, темная страница и favicon вращается) Однако, вопреки моим ожиданиям, он показывает только пустоту, и я проверил console.log. сообщение об ошибке было следующим: Refused to apply style from 'http://127.0.0.1:8000/assets/index.cd9c0392.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Итак, я погуглил и выяснил, что в большинстве случаев проблема в пути. но когда я проверяю свой index.html в файле сборки, путь кажется нормальным. ниже приведена структура папок моей сборки и index.html, не могли бы вы сказать мне, что не так с моим кодом или логикой, или с тем и другим? спасибо, что прочитали, ваша помощь будет оценена по достоинству.
frontend
-dist => this is build folder
--assets
---index.cd9c0392.css
---favicon.21sd12.js
.
.
.
--index.html
-node_modules
-src
-index.html
.
.
.
index.html(in dist)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/assets/favicon.17e50649.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<script type="module" crossorigin src="/assets/index.3e288fda.js"></script>
<link rel="modulepreload" href="/assets/vendor.dc18184a.js">
<link rel="stylesheet" href="/assets/index.cd9c0392.css">
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
P.S Я также получаю следующие ошибки, которые, как я предполагаю, являются ошибками того же типа, что и вышеупомянутые FYI.
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
vendor.dc18184a.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
main.jsx:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
Чтобы использовать React с Django, необходимо сделать несколько вещей.
В Django view.py
необходимо создать представление, которое обслуживает HTML файл пользователю:
#views.py
from django.shortcuts import render
def index(request):
return render(request, 'path/to/html/file/index.html')
В файле urls.py
вам нужно создать путь, который указывает Django, что делать, когда вы делаете запрос:
#urls.py
from django.contrib import admin
from django.urls import path, re_path
from .views import index
#url patters is read from top to bottom
urlpatterns = [
path('admin/', admin.site.urls),
re_path('.*', index), #regex which says everything but admin/ will go to the index view
]
Для доступа к странице перейдите по ссылке http://127.0.0.1:8000
, и она отобразит файл .html, указанный вами в views.py