qidao123.com技术社区-IT企服评测·应用市场

标题: React Axios + Django 跨域解决方案详解 [打印本页]
作者: 用户国营    时间: 2025-4-28 08:36
标题: 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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 qidao123.com技术社区-IT企服评测·应用市场 (https://dis.qidao123.com/) Powered by Discuz! X3.4