Django后端对接React前端时Axios请求出现网络错误求助

看起来你遇到的是**跨域资源共享（CORS）**限制问题——虽然curl能正常访问Django API，但浏览器的同源策略会阻止不同端口的前端页面直接请求后端接口（React通常默认跑在3000端口，Django在8000端口，属于不同源）。下面是具体的解决步骤：

步骤1：安装Django的CORS处理插件 #

首先给你的Django项目安装专门处理跨域请求的django-cors-headers包：

pip install django-cors-headers

步骤2：配置Django的settings.py #

打开项目根目录下的settings.py，完成以下配置修改：

1. 在INSTALLED_APPS中添加corsheaders：

INSTALLED_APPS = [
    # 其他已有的应用...
    'corsheaders',
]

2. 在MIDDLEWARE中添加CORS中间件（注意要放在django.middleware.common.CommonMiddleware之前）：

MIDDLEWARE = [
    # 其他中间件...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 其他中间件...
]

3. 添加允许的前端源地址（针对开发环境的本地React端口）：

# 允许指定的本地前端地址（推荐开发环境使用）
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
    "http://127.0.0.1:3000",
]

# 测试阶段也可临时允许所有源（生产环境绝对禁止使用！）
# CORS_ALLOW_ALL_ORIGINS = True

步骤3：重启服务并测试 #

保存settings.py的修改后，重启Django开发服务器，再运行React项目发起请求。此时浏览器应该会允许前端访问后端API，你就能在控制台看到预期的返回数据了。

额外检查点 #

• 确认Axios请求地址和你curl测试的地址完全一致，没有拼写错误
• 确认Django服务器确实在8000端口正常运行，未被其他程序占用

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