在Django Rest Framework中搭建React应用遇阻求助

核心排查与解决步骤 #

1. 修正Django静态文件配置 #

• 打开settings.py，确保静态文件路径配置正确：

  STATIC_URL = '/static/'
  STATIC_ROOT = BASE_DIR / 'staticfiles'
  STATICFILES_DIRS = [
      BASE_DIR / 'static',
      BASE_DIR / 'frontend/build/static'  # 指向React构建后的静态资源目录
  ]
  

• 执行命令收集静态文件：

  python manage.py collectstatic
  

  确保React构建后的css、js等资源被正确归集到Django的静态文件目录。

2. 配置Django视图返回React入口页 #

• 在主应用views.py中添加视图函数：

  from django.shortcuts import render
  
  def react_entry(request):
      return render(request, 'index.html')
  

• 更新settings.py的模板目录配置，让Django能找到React的index.html：

  TEMPLATES = [
      {
          'BACKEND': 'django.template.backends.django.DjangoTemplates',
          'DIRS': [BASE_DIR / 'frontend/build'],  # 指向React构建后的build目录
          'APP_DIRS': True,
          'OPTIONS': {
              'context_processors': [
                  'django.template.context_processors.debug',
                  'django.template.context_processors.request',
                  'django.contrib.auth.context_processors.auth',
                  'django.contrib.messages.context_processors.messages',
              ],
          },
      },
  ]
  

• 在主应用urls.py中配置路由：

  from django.urls import path
  from .views import react_entry
  
  urlpatterns = [
      # 保留原有DRF接口路由
      path('', react_entry),  # 根路径返回React页面
  ]
  

3. 正确启动服务 #

• 不要直接用Live Server打开React的index.html，而是启动Django服务：

  python manage.py runserver
  

  通过Django的默认端口（如http://127.0.0.1:8000）访问页面，让Django统一处理静态资源和路由。

4. 确认React构建流程 #

• 进入React项目目录，执行构建命令生成完整产物：

  npm run build
  

  检查build目录是否包含index.html和static文件夹，确保构建无报错。

5. 跨域问题处理（前后端分离开发场景） #

如果暂时采用前后端分开启动的模式，需给DRF配置跨域支持：

• 安装跨域插件：

  pip install django-cors-headers
  

• 更新settings.py：

  INSTALLED_APPS = [
      # 其他应用
      'corsheaders',
  ]
  
  MIDDLEWARE = [
      'corsheaders.middleware.CorsMiddleware',
      'django.middleware.common.CommonMiddleware',
      # 其他中间件
  ]
  
  CORS_ALLOW_ALL_ORIGINS = True  # 开发环境临时开启，生产环境需指定具体域名
  

  之后分别启动React服务（npm start）和Django服务，通过React服务调用DRF接口。

内容的提问来源于stack exchange，提问作者Conor Timmis