React与Django集成每次修改需执行npm run build，有无更优方案？

你当前的配置属于生产环境的集成规则，开发阶段可以用前后端分离启动的方案实现React热重载，无需每次执行npm run build，具体操作如下：

开发阶段最优方案：前后端独立启动 #

• 启动Django开发服务，默认运行在 http://127.0.0.1:8000
• 进入React项目目录执行 npm start，启动React自带的开发服务器，默认运行在 http://127.0.0.1:3000，自带热重载能力，修改React代码后会自动刷新页面生效

跨域请求配置（二选一即可） #

方案1：React侧配置代理

1. 安装代理依赖：npm install http-proxy-middleware --save-dev
2. 在React项目src目录下新建setupProxy.js，写入以下配置：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api', // 所有以/api开头的请求都会代理到Django服务
    createProxyMiddleware({
      target: 'http://127.0.0.1:8000',
      changeOrigin: true,
    })
  );
};

后续所有发往后端的接口请求前缀加/api即可，无需修改其他配置。

方案2：Django侧配置跨域

1. 安装跨域依赖：pip install django-cors-headers
2. 修改Django的settings.py：

INSTALLED_APPS = [
    # 其他原有app
    'corsheaders',
]

MIDDLEWARE = [
    # 放在中间件列表最开头
    'corsheaders.middleware.CorsMiddleware',
    # 其他原有中间件
]

CORS_ALLOWED_ORIGINS = [
    "http://127.0.0.1:3000", # 允许React开发服务器的跨域请求
]

上线阶段配置 #

正式上线前再执行npm run build打包，你现有的settings.py配置完全适用，不需要额外调整。

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