开发阶段如何集成SolidJS与Django？含现有项目目录结构

你的项目目录包含back（Django项目）和front（SolidJS TS模板），开发阶段可以用以下两种方式集成：

方案一：分开启动服务，通过CORS处理跨域 #

这种方式操作简单，适合快速开发，两个服务独立运行。

• 配置Django允许跨域请求

  1. 安装跨域处理依赖：pip install django-cors-headers
  2. 修改back/settings.py：
     • 在INSTALLED_APPS中添加corsheaders
     • 在MIDDLEWARE最前面添加corsheaders.middleware.CorsMiddleware（要放在django.middleware.common.CommonMiddleware之前）
     • 添加跨域允许配置：

       CORS_ALLOWED_ORIGINS = [
           "http://localhost:3000",
       ]
       # 开发阶段如果需要临时允许所有来源，可开启下面的配置（上线后记得关闭）
       # CORS_ALLOW_ALL_ORIGINS = True
       

• 启动服务

  1. 启动Django：进入back目录，执行python manage.py runserver（默认端口8000）
  2. 启动SolidJS：进入front目录，执行npm run dev（默认端口3000）
  3. 访问http://localhost:3000即可，SolidJS中请求Django接口需使用绝对路径，比如http://localhost:8000/api/xxx

方案二：Django代理SolidJS开发服务 #

这种方式让所有请求都走Django端口，无需处理跨域，前后端路径统一。

• 配置Django代理

  1. 安装代理依赖：pip install django-proxy
  2. 修改back/settings.py，在INSTALLED_APPS中添加proxy
  3. 修改back/urls.py，添加代理路由：

     from django.contrib import admin
     from django.urls import path, re_path
     from proxy.views import proxy_view
     
     urlpatterns = [
         path('admin/', admin.site.urls),
         # 代理所有前端请求到SolidJS开发服务器
         re_path(r'^(?P<path>.*)$', proxy_view, {'target': 'http://localhost:3000/'}),
     ]
     

• 启动服务

  1. 先启动SolidJS开发服务器：进入front目录执行npm run dev
  2. 再启动Django：进入back目录执行python manage.py runserver
  3. 访问http://localhost:8000即可，SolidJS中请求Django接口可直接用相对路径，比如/api/xxx

注意：开发阶段不建议将SolidJS构建产物放到Django的static目录，因为每次修改代码都需要重新构建，会降低开发效率。

内容的提问来源于stack exchange，提问作者problème0123