15 分钟阅读 - 2025年11月28日
通过逐步指导，学习如何使用 Django（后台）和 React（前台）构建全栈网络应用程序。
想要创建一个具有强大后台和动态前台的网络应用程序？将Python框架Django 与 JavaScript 库React 搭配使用是实现这一目标的好方法。Django 可以处理数据库管理和 API 创建等后台任务，而 React 则可以创建一个反应灵敏的交互式用户界面。
关键步骤
设置环境：- 为 Django 安装 Python 3.x，为 React 安装Node.js。
python --版本、node --版本和npm --版本确认安装。组织项目：- 为 Django 后端和 React 前端创建单独的文件夹。
django-admin startproject进行后端设置，使用npx create-react-app进行前端初始化。构建后端：- 创建 Django 应用程序、定义模型并生成迁移。
django-cors-headers以实现前台和后台之间的通信。开发前端：- 使用 React 组件管理任务和用户交互。
连接并测试：- 在localhost:8000上运行 Django，在localhost:3000 上运行 React。
通过这种设置，您可以高效地构建一个后端和前端明确分离的全栈应用程序。请按照以下步骤创建一个可扩展的交互式网络应用程序。
在开始构建 Django 和 React 应用程序之前，使用必要的工具和依赖关系设置开发环境至关重要。这一基础将帮助您在开发过程中顺利创建、集成和测试 Django 和 React 组件。
要开始使用，您的开发机器需要为 Django安装 Python 3.x，为 React 安装Node.js。具体来说，Django 5.0 需要 Python 3.x，而 React 需要 Node.js 12 或更高版本。
安装 Python：您可以直接从 Python 官方网站下载，或使用系统的软件包管理器。对于 macOS 用户，Homebrew可以通过brew install python 实现简单安装。Windows 用户应从 python.org 获取安装程序，而 Linux 用户可以使用 Ubuntu 上的apt install python3或其他发行版的类似命令进行安装。
设置 Node.js 和 npm：Node.js 与 npm（Node 包管理器）捆绑在一起。您需要 npm 6 或更高版本，其中 7.5.4 版本是一个可靠的选择。从 nodejs.org 下载 Node.js，它会自动包含 npm。
Python 虚拟环境：使用虚拟环境是无冲突管理特定项目依赖关系的关键。您可以使用内置的venv模块或pipenv或virtualenvwrapper等工具来获得更多功能。如果你使用的是 Windows 系统，virtualenvwrapper-win软件包也能提供类似功能。
要确认安装，请在终端运行以下命令：
python --version node --version npm --version
一个组织良好的项目结构对保持后端和前端代码的分离和可管理性至关重要。首先为项目创建一个主目录：
mkdir django-react-app cd django-react-app
在该目录下创建两个文件夹：一个用于 Django 后端，另一个用于 React 前端。通过这种分离，您可以独立维护和部署每一部分。
在项目目录中设置 Python 虚拟环境：
python -m venv venv
激活虚拟环境：
源 venv/bin/activatevenv\scripts\activate此步骤可确保隔离项目的所有 Python 依赖项。
环境准备就绪后，就该为 Django 和 React 安装必要的软件包了。
Django 后台软件包：当虚拟环境处于活动状态时，使用 pip 安装 Django 及其支持库：
pip install django pip install djangorestframework pip install django-cors-headers
React 前端设置：要设置 React 环境，请使用create-react-app工具。该命令将初始化 React 项目并安装所有必要的依赖项：
npx create-react-app frontend
这将在前端目录下创建一个新的 React 项目，其中包含必要的软件包、开发工具和构建脚本。
附加前端软件包：设置好 React 项目后，导航到frontend目录并安装 Axios，这是一个用于向 Django API 发送 HTTP 请求的库：
cd frontend npm install axios
至此，您的开发环境已配备了 Python 3.x、Django、Node.js、React 和所有必要的工具。Python 虚拟环境确保了后端依赖关系的隔离，而 npm 则单独处理 JavaScript 包。现在，您可以开始构建全栈应用程序了！
使用数据库模型、API 端点和 React 前端集成建立 Django 后端。
首先创建一个 Django 项目，其中包括设置、数据库配置和特定于应用程序的选项。在该项目中，您将创建一个 Django 应用程序，这是一个 Python 软件包，专为管理用户数据或内容等特定任务而设计。
导航到项目的根目录（虚拟环境的设置位置），然后创建 Django 项目：
django-admin startproject backend .
该命令直接在当前目录下生成项目文件，避免了额外的文件夹。你会发现一些新文件，如manage.py（用于运行 Django 命令）和包含settings.py、urls.py、asgi.py 和wsgi.py 等文件的后台目录。
接下来，创建一个应用程序来处理特定功能。例如，任务管理系统：
python manage.py startapp tasks
这将创建一个任务目录，其中包含基本文件，如models.py、views.py、admin.py 和migrations文件夹。请务必避免与 "django "或 "test "等内置名称发生命名冲突。
在项目设置中注册应用程序，将其添加到backend/settings.py 中的INSTALLED_APPS列表中：
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'rest_framework', 'corsheaders', 'tasks', # 注册你的应用程序 ]。
使用 Django 模型定义数据结构。例如，可以在tasks/models.py 中为任务管理应用程序添加一个简单的任务模型：
from django.db import models class Task(models.Model): title = models.CharField(max_length=200) description = models.TextField(blank=True) completed = models.BooleanField(default=False) created_at = models.DateTimeField(auto_now_add=True) updated_at = models.DateTimeField(auto_now=True) class Meta: ordering = ['-created_at'] def __str__(self): return self.title
该模型包括CharField（用于短文本）、TextField（用于长内容）、BooleanField（用于真/假值）和DateTimeField（用于时间戳）等字段。Meta类指定了默认排序等选项。
通过运行迁移，将模型应用到数据库中：
python manage.py makemigrations tasks python manage.py migrate
要将模型数据转换为 JSON 格式，请使用 Django REST Framework 序列化器。在tasks/serializers.py 中，为Task模型定义一个序列化器：
from rest_framework import serializers from .models import Task class TaskSerializer(serializers.ModelSerializer): class Meta: model = Task fields = ['id', 'title', 'description', 'completed', 'created_at', 'updated_at'] read_only_fields = ['created_at', 'updated_at']
ModelSerializer会根据模型自动生成字段和方法。明确列出字段可确保不会无意中暴露敏感数据。
Django REST 框架简化了 API 的创建。对于标准的 CRUD 操作，使用带有路由器的ViewSets来实现简洁的 RESTful 结构。
在tasks/views.py 中，创建 API 视图：
from rest_framework import viewsets from rest_framework.permissions import AllowAny from .models import Task from .serializers import TaskSerializer class TaskViewSet(viewsets.ModelViewSet): queryset = Task.objects.all() serializer_class = TaskSerializer permission_classes = [AllowAny] # 仅用于开发
ModelViewSet可自动处理任务的列出、创建、检索、更新和删除。
在tasks/urls.py 中设置 URL 路由：
from django.urls import path, include from rest_framework.routers import DefaultRouter from .views import TaskViewSet router = DefaultRouter() router.register(r'tasks', TaskViewSet) urlpatterns = [ path('api/', include(router.urls)), ]
在主后台/urls.py文件中包含这些 URL：
from django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('', include('tasks.urls'), )
要让 React 前端（运行于 3000 端口）与 Django 后端（运行于 8000 端口）通信，请配置跨源资源共享（CORS）。如果不这样做，浏览器会出于安全原因阻止跨源请求。
更新backend/settings.py，加入 CORS 配置：
MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', # 在顶部添加 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', ] # 用于开发的 CORS 设置 CORS_ALLOWED_ORIGINS = [ "http://localhost:3000", # React 开发服务器 "http://127.0.0.1:3000", ] CORS_ALLOW_CREDENTIALS = True
为了快速测试，您可以使用CORS_ALLOW_ALL_ORIGINS = True，但指定允许的起源更为安全。
在集成 React 前端之前，请测试 API 端点，确保它们能按预期运行。启动 Django 开发服务器：
python manage.py runserver
访问 API：http://127.0.0.1:8000/api/tasks/。使用可浏览的 API 测试 GET 和 POST 请求等操作。
或者使用 cURL 或 Postman 进行测试：
# Test GET request to list tasks curl -X GET http://127.0.0.1:8000/api/tasks/ # Test POST request to create a task curl -X POST http://127.0.0.1:8000/api/tasks/ \ -H "Content-Type: application/json" \ -d '{"title"："测试任务"，"描述"："这是一个测试任务"}'
要进行自动测试，请在tasks/tests.py 中添加测试用例：
from rest_framework.test import APITestCase from rest_framework import status from .models import Task class TaskAPITestCase(APITestCase): def test_create_task(self): # 在此添加断言和测试逻辑 pass
后端就绪后，您就可以将其连接到 React 前端了。
为了给 Django 后端创建一个引人入胜的界面，您将使用 React 来管理用户交互--从查看任务到添加新任务。
首先使用Create React App 设置 React 前端。导航到项目根目录（Django 后端所在目录），然后运行
npx create-react-app frontend cd frontend
该命令会使用package.json、src/App.js 和public/index.html 等基本文件设置 React 应用程序。它还包括用于捆绑的webpack、用于编译 JavaScript 的Babel和用于测试的开发服务器等工具。
接下来，安装 Axios 来处理 Django API 的 HTTP 请求：
npm install axios
Axios 通过管理 JSON 解析和提供比内置fetch()函数更好的错误处理，使 API 调用更简单。它还支持请求和响应拦截器等功能。
现在您的文件夹结构应该是这样的
project-root/ ├── 后端/ │ ├── manage.py │ ├── 后端/ │ └── 任务/ └── 前端/ ├─ package.json ├─ public/ └── src/
要确认一切正常，请启动 React 开发服务器：
npm start
这将在http://localhost:3000 启动应用程序，显示默认的 React 欢迎页面。在开发过程中，请保持该服务器的运行--当你进行更改时，它会自动重新加载。
让我们创建一个TaskList组件来显示从 Django API 获取的任务。在src/components/TaskList.js 中添加以下内容：
import React from 'react'; const TaskList = ({ tasks, onToggleComplete, onDeleteTask }) => { return ( <div className="task-list"> <h2>Your Tasks</h2> {tasks.length === 0 ? ( <p>No tasks available.创建您的第一个任务！</p> ) : ( <ul> {tasks.map((task) => ( <li key={task.id} className={`task-item ${task.completed ?'completed' : ''}}> <div className="任务内容"> <h3>{task.title}</h3> <p>{task.description}</p> <small>Created：{new Date(task.created_at).toLocaleDateString()}</small> </div> <div className="task-actions"> <button onClick={() => onToggleComplete(task.id, !task.completed)} className={task.completed ?'btn-undo' : 'btn-complete'} > {task.completed ?'Undo' : 'Complete'} </button> <button onClick={() => onDeleteTask(task.id)} className="btn-delete" > 删除 </button> </div> </li> ))} </ul> )} </div> ); }; 导出默认 TaskList.TaskForm 组件；
接下来，创建用于添加新任务的TaskForm组件。将其添加到src/components/TaskForm.js 中：
import React, { useState } from 'react'; const TaskForm = ({ onAddTask }) => { const [title, setTitle] = useState(''); const [description, setDescription] = useState(''); const [isSubmitting, setIsSubmitting] = useState(false); const handleSubmit = async (e) => { e.preventDefault(); if (!title.trim()) return; setIsSubmitting(true); try { await onAddTask({ title: title.trim(), description: description.trim() }); setTitle(''); setDescription(''); } catch (error) { console.error('Error adding task：', error); } finally { setIsSubmit(false); } }; return ( <form onSubmit={handleSubmit} className="task-form"> <h2>Add New Task</h2> <div className="form-group"> <input type="text" placeholder="任务标题" value={title} onChange={(e) => setTitle(e. target.target.value)} disabled={isSubmitting} required /> </div> <div className="form-group"> <textarea placeholder="任务描述（可选）" value={description} onChange={(e) => setDescription(e. target.target.value)} disabled={isSubmitting} rows="3" /> </div> <按钮 type="submit" disabled={isSubmitting || !title.trim()}> {isSubmitting ?'Adding...' : 'Add Task'} </button> </form> ); }; 导出默认 TaskForm；
对于一些基本样式，请创建src/App.css文件并添加以下内容：
.task-list { margin: 20px 0; } .task-item { display: flex; justify-content: space-between; align-items: center; padding：15px; border：1px solid #ddd; margin-bottom：10px; border-radius: 5px; } .task-item.completed { background-color：#text-decoration: line-through; opacity: 0.7; } .task-form { background：#f9f9f9; padding：20px; border-radius: 5px; margin-bottom: 20px; } .form-group { margin-bottom：15px; } .form-group input, .form-group textarea { width: 100%; padding：10px; border：1px solid #ddd; border-radius：3px; } .btn-complete, .btn-undo, .btn-delete { margin-left: 10px; padding：5px 10px; border: none; border-radius：3px; cursor: pointer; } .btn-complete { background：#28a745; color: white; } .btn-undo { background：#ffc107; color: black; } .btn-delete { background：#dc3545; color: white; }
React 钩子（如useState和useEffect）可轻松管理状态并与 Django 后端交互。要集中管理 API 调用，请创建一个服务文件src/services/api.js：
import axios from 'axios'; const API_BASE_URL = 'http://127.0.0.1:8000/api'; const api = axios.create({ baseURL：API_BASE_URL, headers：{ 'Content-Type': 'application/json', }, }); export const taskAPI = { getTasks: () => api.get('/tasks/'), createTask: (taskData) => api.post（'/tasks/'，taskData），updateTask：（taskId，taskData）=>；api.put（`/tasks/${taskId}/`，taskData），deleteTask：（taskId）=>；api.delete（`/tasks/${taskId}/`），}；导出默认 api；
最后，将所有内容集成到src/App.js 中：
import React, { useState, useEffect } from 'react'; import TaskList from './组件/TaskList'； import TaskForm from './组件/TaskForm'； import { taskAPI } from './services/api'； import './App.css'； function App().css'; function App() { const [tasks, setTasks] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { fetchTasks(); }, []); const fetchTasks = async () => { try { setLoading(true); const response = await taskAPI.getTasks(); setTasks(response.data); } catch (err) { setError(err); } finally { setLoading(false); } }; // 用于添加、更新和删除任务的其他方法将放在这里 } }; // 用于添加、更新和删除任务的其他方法将放在这里 } }; // 用于添加、更新和删除任务的其他方法将放在这里 } }; // 用于添加、更新和删除任务的其他方法将放在这里 } 。
有了这些设置，您的 React 前端就可以交互式地处理任务，同时与 Django 后端无缝通信了。
厌倦了缓慢的部署或带宽限制？FDC Servers 提供即时的专用电源、全球覆盖和灵活的计划，适用于任何规模。准备升级？
立即开启性能现在您的后端和前端已经启动并运行，下一步就是确保它们之间的通信顺畅。这包括设置 API 端点、管理请求和解决任何集成问题。
React 应用程序需要知道 Django API 端点的位置。为此，请使用特定环境配置更新src/services/api.js文件：
import axios from 'axios'; // Determine API base URL based on environment const getApiBaseUrl = () => { if (process.env.NODE_ENV === 'production') { return process.env.REACT_APP_API_URL || 'https://your-production-domain.com/api'; } return 'http://127.0.0.1:8000/api'; }; const API_BASE_URL = getApiBaseUrl(); const api = axios.create({ baseURL：API_BASE_URL, headers：{ 'Content-Type': 'application/json', }, timeout：10000, // 10 秒超时 }); export const taskAPI = { getTasks: () => api.get('/tasks/'), createTask: (taskData) => api.post（'/tasks/'，taskData），updateTask：（taskId，taskData）=>；api.put（`/tasks/${taskId}/`，taskData），deleteTask：（taskId）=>；api.delete（`/tasks/${taskId}/`），}；导出默认 api；
对于生产，请在 React 项目根目录下添加一个.env文件，内容如下：
react_app_api_url=https://your-production-domain.com/api
此设置可确保 React 应用程序与 Django 后端无缝交互，无论您是在本地开发环境还是部署到生产环境。配置好 API 端点后，您就可以获取和操作后端数据了。
设置好 API 配置后，您就可以执行 CRUD 操作来管理 React 和 Django 之间的数据。更新src/App.js以处理这些操作：
import React, { useState, useEffect } from 'react'; import TaskList from './组件/TaskList'； import TaskForm from './组件/TaskForm'； import { taskAPI } from './services/api'； import './App.css'； function App().css'; function App() { const [tasks, setTasks] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { fetchTasks(); }, []); const fetchTasks = async () => { try { setLoading(true); setError(null); const response = await taskAPI.getTasks(); setTasks(response.data); } catch (err) { setError('Failed to fetch tasks. Please check your connection.'); console.error('Error fetching tasks:', err); } finally { setLoading(false); } }; const handleAddTask = async (taskData) => { try { const response = await taskAPI.createTask(taskData); setTasks(prevTasks => [...prevTasks, response.data]); } catch (err) { console.error('Error adding task:', err); throw err; // Re-throw to let TaskForm handle the error } }; const handleToggleComplete = async (taskId, completed) => { try { const taskToUpdate = tasks.find(task => task.id === taskId); const updatedTaskData = { ...taskToUpdate, completed }; const response = await taskAPI.updateTask(taskId, updatedTaskData); setTasks(prevTasks => prevTasks.map(task => task.id === taskId ? response.data : task ); } catch (err) { console.error('Error updating task:', err); } }; const handleDeleteTask = async (taskId) => { if (!window.confirm('Are you sure you want to delete this task?')){ return; } try { await taskAPI.deleteTask(taskId); setTasks(prevTasks => prevTasks.filter(task => task.id !== taskId)); } catch (err) { console.error('Error deleting task:', err); } }; if (loading) { return <div className="loading">Loading tasks...</div>; } return ( <div className="App"> <header className="App-header"> <h1>Task Manager</h1> </header> <main className="container">{error&&<div className="error-message">{error}</div>}<TaskForm onAddTask={handleAddTask}/> <TaskList tasks={tasks} onToggleComplete={handleToggleComplete} onDeleteTask={handleDeleteTask} /> </main> </div> ); } 导出默认 App；
这段代码用于处理任务的创建、更新、删除和错误管理。用户界面会立即更新，以提供流畅的用户体验，而错误则会通过恢复更改或显示适当的信息进行优雅的管理。
连接 Django 和 React 时最常见的障碍之一是处理 CORS（跨源资源共享）错误。出现这些错误的原因是浏览器出于安全考虑阻止了不同源之间的请求。在开发过程中，React 通常在localhost:3000 上运行，而 Django 则在localhost:8000 上运行，这就产生了跨源场景。
要解决 CORS 问题，请确保已按照 "配置 CORS 标头 "部分所述在 Django 设置中配置了 CORS 标头。更改后，重启 Django 服务器以应用这些更改。
下面是一些常见的 API 请求错误及其解决方案：
owner字段。请务必仔细检查您的前端是否发送了 Django 模型期望的所有必填字段。generics.RetrieveUpdateAPIView更新为generics.RetrieveUpdateDestroyAPIView，使其支持DELETE请求，该问题得以解决。连接好 Django 后端和 React 前端后，就可以启动两个开发服务器并测试应用程序了。这包括同时运行两台服务器，并确保一切运行顺畅。
要运行 Django-React 应用程序，您需要两个终端窗口，每个服务器一个。这种设置允许后端和前端独立运行，同时通过 API 调用进行通信。
启动 Django 后端服务器：
打开第一个终端窗口，导航到 Django 项目的根目录。
激活 Python 虚拟环境：
source venv/bin/activate
启动 Django 开发服务器
python manage.py runserver
服务器将在http://127.0.0.1:8000/ 上可用。
启动 React 前端服务器：
打开第二个终端窗口，导航到 React 项目目录：
cd frontend
启动 React 开发服务器：
npm start
这将自动在http://localhost:3000/ 上打开一个浏览器窗口。
两个服务器都运行后，就可以开始测试应用程序的功能了。
随着服务器的启动和运行，以及 CORS 和 API 端点的正确配置，是时候验证前端和后端之间的数据流了。
后端 API 验证：
直接访问以下网站测试 Django API 端点：
http://localhost:8000/api/tasks
这将显示 Django REST 框架的可浏览 API 界面，您可以在此执行创建和读取操作。
访问 Django 管理界面，网址是
http://localhost:8000/admin
使用超级用户凭据登录，创建、编辑或删除任务。您还可以访问以下网站测试 UPDATE 和 DELETE 操作：
http://localhost:8000/api/tasks/{id}
前台-后台集成测试：
http://localhost:3000上打开 React 应用程序并确认其加载正确，显示来自 Django 后台的任务。如果您的应用程序包含过滤器或其他功能，请对它们进行全面测试，以确认任务显示与预期一致。
如果在测试过程中遇到任何问题，可以尝试以下常见的修复方法。
API 连接错误：
确保两个服务器都在各自的端口上运行：Django 在http://localhost:8000，React 在http://localhost:3000。
使用浏览器开发工具（网络选项卡）识别 HTTP 状态代码，如 404 或 500。
检查 React 项目package.json文件中的代理设置：
"proxy"（代理）："http://localhost:8000"
如果做了更改，请重新启动 React 服务器。
服务器启动问题：
如果 Django 服务器无法启动，请检查迁移是否丢失：
python manage.py makemigrations python manage.py migrate
对于 React 服务器问题，请尝试重新安装依赖项：
npm install
数据流问题：
console.log()或 Django 视图中的print语句，以跟踪数据流。/api/tasks/）。您已经创建了一个结合了 Django 和 React 的网络应用程序，这为您提供了一个全栈开发的坚实入门。本项目突出了一些基本概念，如将后端与前端分离、执行 CRUD 操作以及使用 CORS 设置管理跨源请求。在此过程中，你将使用 Django REST 框架来构建 API，并使用 React 挂钩来进行状态管理--这些技能将使这两个强大的工具得以顺利集成。
让您的应用程序更上一层楼
扩展应用程序功能的空间很大。例如，您可以使用 Django REST 框架添加JWT 身份验证，以确保用户数据和 API 访问的安全。这样，您就可以提供特定于用户的功能和个性化体验。
如果您的应用程序需要实时更新，可以考虑使用Django Channels来启用 WebSocket 支持。这非常适合实时仪表盘、聊天系统或通知等功能，使您的应用程序成为一个更具活力和互动性的平台。
随着应用程序的发展，高级数据可视化变得非常重要。通过将 React 的呈现功能与高效的后台数据获取相结合，您将能够有效地处理和显示复杂的数据集。
为生产做好准备
在准备生产应用程序时，应重点关注部署、安全性和性能。虽然当前的设置非常适合本地开发，但生产环境需要额外的步骤。这些步骤包括设置环境变量、优化数据库和实施强大的错误处理机制。
这些改进建立在您已经掌握的技能基础上，如 API 设计、基于组件的架构和全栈集成。掌握了这些高级技术，你就能很好地应对企业级项目，并继续成长为一名网络开发人员。
在后端使用 Django，在前端使用 React，可为开发现代网络应用程序提供强大的融合。Django 提供了一个坚实的框架，其中包含可简化后端开发的各种工具，而 React 则在构建动态和交互式用户界面方面大放异彩。
这种组合促进了明确的职责分工，有助于保持代码库的有序性，并更易于随着时间的推移而扩展。React 基于组件的结构鼓励用户界面元素的重复使用，而 Django 的 REST 框架简化了 API 的构建过程，确保了前端和后端之间的顺畅通信。它们共同提供了一种快速、高效和以用户为中心的应用程序开发方法。
要解决 React 前端和 Django 后端之间的 CORS 问题，django-cors-headers软件包是一个方便的解决方案。首先，使用 pip 安装它。然后，在settings.py文件中，将"corsheaders "添加到INSTALLED_APPS列表中。然后，将"corsheaders. middleware .CorsMiddleware "添加到MIDDLEWARE列表的顶部，以确保中间件执行顺序正确。
在开发过程中，您可以通过在settings.py 中设置CORS_ORIGIN_ALLOW_ALL = True来简化程序。这样就允许来自任何来源的请求。不过，在生产环境中，使用CORS_ALLOWED_ORIGINS设置来定义特定的可信域要安全得多。这种方法有助于保持更严格的安全性。
通过这种配置，您的 React 应用程序可以与 Django API 顺利交互，同时符合 CORS 要求。
要为生产准备 Django 和 React 应用程序，首先要调整 Django 设置以实现安全设置。这包括将DEBUG设置为假，并指定ALLOWED_HOSTS，以控制哪些域可以访问您的应用程序。这些更改对于在实时环境中保护应用程序至关重要。
接下来，为您的 Django 后端和静态文件选择一个可靠的托管平台。确保您的基础设施能够处理生产级别的流量和需求。对于 React 前端，使用适当的构建工具生成优化的生产构建。
一旦您的 React 应用程序准备就绪，请设置一个像 Nginx 这样的网络服务器，为 React 前端和 Django 后端提供服务。正确的服务器配置可确保您的应用程序高效运行，并为用户提供无缝体验。
上线前，在生产环境中彻底测试应用程序。这一步有助于发现和解决任何问题，确保您的应用程序在启动后能可靠地运行。
10 分钟阅读 - 2025年10月15日