如何使用Webpack连接现有Django后端REST服务与React前端应用

API 探路者

2026-5-22

嘿，我来帮你搞定这两个现成项目的集成！既然Django后端和React前端都已经写好了，咱们主要解决跨域、API验证和前端调用这几个核心环节就行，一步步来：

第一步：给Django配置跨域请求支持

开发时React一般跑在localhost:3000，Django默认在localhost:8000，浏览器的同源策略会阻止跨域AJAX请求，所以得先给Django装个插件放行前端的请求：

先在Django的虚拟环境里安装依赖：pip install django-cors-headers

打开DJANGOROOT/mydjangoproj/settings.py，做以下修改：

在INSTALLED_APPS里加入'corsheaders'
在MIDDLEWARE的最顶部（要比CommonMiddleware早）添加'corsheaders.middleware.CorsMiddleware'

添加上允许的前端域名配置：

CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",  # 改成你实际的React运行端口/域名
    "http://127.0.0.1:3000",
]
# 开发阶段如果想偷懒允许所有请求（生产环境绝对别用），可以改成：
# CORS_ALLOW_ALL_ORIGINS = True

重启Django开发服务器，让配置生效：python manage.py runserver

第二步：确认Django REST API本身能正常访问

先确保后端接口没问题，再连前端：

启动Django服务器后，用浏览器或Postman直接访问你的API端点，比如http://localhost:8000/api/your-app-endpoint/，确认能返回正确的JSON数据
如果你的API需要身份验证（比如Token认证），先在settings.py里配置好REST框架的认证类，比如：
```
REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework.authentication.TokenAuthentication',
    ],
}
```
同时确保你已经生成了测试用的Token，方便后续React端调用。

第三步：在React项目里编写AJAX调用逻辑

这里用最常用的axios库举例子（用原生fetch也完全可以）：

如果React项目还没装axios，先在项目根目录执行：npm install axios（或者yarn add axios）

在需要调用API的React组件里，写调用代码：

import axios from 'axios';

// 全局配置axios的基础URL，避免每次写全路径
axios.defaults.baseURL = 'http://localhost:8000/api';
// 如果需要认证，把Token加到请求头里（替换成你的实际Token）
// axios.defaults.headers.common['Authorization'] = `Token your-test-token-here`;

function DataFetchComponent() {
  const fetchDjangoData = async () => {
    try {
      const response = await axios.get('/your-app-endpoint/');
      console.log('从Django拿到的数据:', response.data);
      // 这里可以把数据存入组件状态，渲染到页面上
    } catch (error) {
      console.error('调用API出错了:', error);
    }
  };

  return (
    <button onClick={fetchDjangoData}>获取后端数据</button>
  );
}

export default DataFetchComponent;

要是想用原生fetch，示例代码如下：

async function fetchDjangoData() {
  try {
    const response = await fetch('http://localhost:8000/api/your-app-endpoint/', {
      method: 'GET',
      // 认证的话添加请求头
      // headers: {
      //   'Authorization': `Token your-test-token-here`
      // }
    });
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

第四步：生产环境部署的小提醒（可选）

如果以后要上线，有两种主流方案：

方案一：把React打包后嵌入Django
1. 在React项目里执行npm run build，生成build文件夹
2. 在Django的settings.py里配置静态文件和模板路径，指向React的build文件夹
3. 写一个Django视图返回React的index.html，或者用django-spa这类包简化配置
方案二：前后端分开部署，用Nginx反向代理
React部署到CDN或静态服务器，Django部署到应用服务器，然后配置Nginx把React的API请求转发到Django，这样就不用处理跨域了。

常见问题排查

要是React报跨域错误：检查Django的CORS_ALLOWED_ORIGINS是否包含你的React域名/端口，确认CORS中间件的位置是否正确
要是API返回401/403：检查认证Token是否正确，Django的权限配置是否允许当前用户访问该端点
要是Django返回500错误：先直接在浏览器访问API端点，看具体的错误信息，再排查后端代码

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