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

一、Django 后端配置（Python）

1.1 安装 CORS 中间件

1. pip install django-cors-headers

复制代码

1.2 配置 settings.py

1. # settings.py
3. # 核心配置项
4. INSTALLED_APPS = [
5.     ...
6.     'corsheaders',  # 新增应用
7. ]
9. MIDDLEWARE = [
10.     ...
11.     'corsheaders.middleware.CorsMiddleware',  # 必须放在最前
12.     'django.middleware.common.CommonMiddleware',
13. ]
15. # 跨域配置
16. CORS_ALLOWED_ORIGINS = [
17.     "http://localhost:3000",  # React开发地址
18.     "https://your-production-domain.com",
19. ]
21. # 允许携带Cookie
22. CORS_ALLOW_CREDENTIALS = True
24. # 允许的自定义请求头
25. CORS_ALLOW_HEADERS = [
26.     'content-type',
27.     'authorization',
28.     'x-csrftoken',  # Django CSRF需要
29. ]
31. # 允许的HTTP方法
32. CORS_ALLOW_METHODS = [
33.     'GET',
34.     'POST',
35.     'PUT',
36.     'PATCH',
37.     'DELETE',
38.     'OPTIONS'
39. ]
41. # Cookie安全配置（生产环境必须）
42. SESSION_COOKIE_SAMESITE = 'None'  # 允许跨站
43. SESSION_COOKIE_SECURE = True      # 仅HTTPS传输
44. CSRF_COOKIE_SAMESITE = 'None'
45. CSRF_COOKIE_SECURE = True
47. # 生产环境域名白名单
48. ALLOWED_HOSTS = [
49.     '.your-domain.com',
50.     'localhost',
51.     '127.0.0.1'
52. ]

复制代码

1.3 视图示例（views.py）

1. from django.http import JsonResponse
2. from django.views.decorators.csrf import ensure_csrf_cookie
4. @ensure_csrf_cookie  # 确保返回CSRF Token
5. def user_info(request):
6.     if request.method == 'GET':
7.         return JsonResponse({
8.    
9.             'username': request.user.username,
10.             'is_authenticated': request.user.is_authenticated
11.         })

复制代码

<hr> 二、React 前端配置（Axios）

2.1 创建 Axios 实例

1. // src/api/axios.js
2. import axios from 'axios';
4. const axiosInstance = axios.create({
5.    
6.   baseURL: process.env.REACT_APP_API_BASE_URL,
7.   withCredentials: true, // 关键配置：允许携带Cookie
8.   headers: {
9.    
10.     'Content-Type': 'application/json',
11.     'X-Requested-With': 'XMLHttpRequest'
12.   }
13. });
15. // 请求拦截器（添加CSRF Token）
16. axiosInstance.interceptors.request.use(

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。