同一服务器同端口下使用React CDN与Django的实现方案咨询

最优方案：本地预打包React产物，Django直接托管静态资源 #

你完全不需要在应用服务器上运行额外的Node进程，也不需要配置跨域，具体实现逻辑如下：

• 本地开发阶段：在开发机上正常使用create-react-app搭建项目，react、react-router、axios、prop-types等依赖全部通过npm本地安装，接口请求直接写相对路径（比如/api/xxx），不需要添加域名端口
• 生产打包：开发完成后在本地执行npm run build命令，工具会自动把所有依赖、业务代码、样式打包成独立的静态资源文件，所有产物都放在生成的build目录下
• 部署配置：将build目录下的所有静态资源（js、css、图片等）拷贝到Django项目的static目录中，build目录下的index.html文件拷贝到Django的templates目录中
• Django路由配置：保留原有所有API接口的路由规则，新增根路径和fallback路由，全部返回React的index.html模板即可

该方案的优势：服务器完全不需要安装Node，也不会额外运行任何进程占用内存CPU，所有请求同源不需要配置CORS，打包后的资源加载效率远高于引入多个CDN脚本，完全匹配你降低服务器负载的需求

如果访问量较高，你还可以额外配置Nginx优先处理静态资源请求，只把API请求转发给Django处理，可以进一步降低Django的负载。

若坚持使用CDN引入方案的实现方式 #

如果不想走本地打包流程，要直接通过CDN引入依赖，按以下规则处理即可：

• 所有用到的依赖都需要单独引入对应CDN脚本，注意引入顺序要优先加载核心依赖：先引入react、react-dom，再引入react-router、prop-types、axios等工具库，最后引入你自己编写的React组件脚本
• CDN引入的依赖会自动挂载到window全局对象，代码中不需要写import语句，直接调用全局变量即可，比如window.axios、window.PropTypes
• 生产环境如果要优化加载速度，可以在本地把所有CDN依赖和业务代码合并打包成单个JS文件，放到Django的static目录托管即可，不需要在服务器做任何额外操作

避坑提醒 #

如果前端路由使用BrowserRouter模式，需要在Django的路由配置最后添加fallback规则，避免用户刷新非根路径页面时出现404，配置示例如下：

# Django urls.py 配置示例
from django.urls import path, re_path
from django.views.generic import TemplateView

urlpatterns = [
    # 原有API路由放在最前面
    path('api/xxx/', your_api_view),
    # 兜底路由：所有非API请求都返回React的首页模板
    re_path(r'^.*$', TemplateView.as_view(template_name='index.html')),
]

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