React Axios + Django 跨域解决方案详解

一、Django 后端配置（Python）

1.1 安装 CORS 中间件

pip install django-cors-headers

1.2 配置 settings.py

# settings.py

# 核心配置项
INSTALLED_APPS = [
    ...
    'corsheaders',  # 新增应用
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',  # 必须放在最前
    'django.middleware.common.CommonMiddleware',
]

# 跨域配置
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",  # React开发地址
    "https://your-production-domain.com",
]

# 允许携带Cookie
CORS_ALLOW_CREDENTIALS = True

# 允许的自定义请求头
CORS_ALLOW_HEADERS = [
    'content-type',
    'authorization',
    'x-csrftoken',  # Django CSRF需要
]

# 允许的HTTP方法
CORS_ALLOW_METHODS = [
    'GET',
    'POST',
    'PUT',
    'PATCH', 
    'DELETE',
    'OPTIONS'
]

# Cookie安全配置（生产环境必须）
SESSION_COOKIE_SAMESITE = 'None'  # 允许跨站
SESSION_COOKIE_SECURE = True      # 仅HTTPS传输
CSRF_COOKIE_SAMESITE = 'None'
CSRF_COOKIE_SECURE = True

# 生产环境域名白名单
ALLOWED_HOSTS = [
    '.your-domain.com',
    'localhost',
    '127.0.0.1'
]

1.3 视图示例（views.py）

from django.http import JsonResponse
from django.views.decorators.csrf import ensure_csrf_cookie

@ensure_csrf_cookie  # 确保返回CSRF Token
def user_info(request):
    if request.method == 'GET':
        return JsonResponse({
   
            'username': request.user.username,
            'is_authenticated': request.user.is_authenticated
        })

二、React 前端配置（Axios）

2.1 创建 Axios 实例

// src/api/axios.js
import axios from 'axios';

const axiosInstance = axios.create({
   
  baseURL: process.env.REACT_APP_API_BASE_URL,
  withCredentials: true, // 关键配置：允许携带Cookie
  headers: {
   
    'Content-Type': 'application/json',
    'X-Requested-With': 'XMLHttpRequest'
  }
});

// 请求拦截器（添加CSRF Token）
axiosInstance.interceptors.request.use(