Django与React项目如何跟踪匿名会话并解决购物车重复创建问题

Django的session跟踪机制依赖客户端请求携带的sessionid Cookie，前后端分离部署场景下，React发请求默认不会跨域携带Cookie，因此Django会将每次请求识别为新的未认证用户，每次都会创建新的购物车实例。

按照以下先后顺序调整前后端配置即可解决：

• 前端请求配置调整
  所有发往Django后端的请求必须开启携带凭证的配置：

  1. 若使用axios发起请求，全局添加配置：

  axios.defaults.withCredentials = true
  

  2. 若使用原生fetch发起请求，每次请求添加配置项：

  fetch('你的Django接口地址', {
    credentials: 'include',
    // 其他请求配置
  })
  

  3. 若使用Apollo Client调用GraphQL接口，创建实例时添加凭证和CSRF配置：

  import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';
  import { setContext } from '@apollo/client/link/context';
  
  const httpLink = createHttpLink({
    uri: '你的Django GraphQL接口地址',
    credentials: 'include',
  });
  
  // 自动从Cookie读取CSRF Token添加到请求头
  const csrfLink = setContext((_, { headers }) => {
    const getCookie = (name) => {
      let value = `; ${document.cookie}`;
      let parts = value.split(`; ${name}=`);
      if (parts.length === 2) return parts.pop().split(';').shift();
    }
    const csrftoken = getCookie('csrftoken');
    return {
      headers: {
        ...headers,
        'X-CSRFToken': csrftoken,
      }
    }
  });
  
  const client = new ApolloClient({
    link: csrfLink.concat(httpLink),
    cache: new InMemoryCache(),
  });
  

• Django后端CORS配置调整
  首先确保已经安装django-cors-headers依赖，在项目settings.py中修改以下配置：

  1. 明确指定允许的前端域名，不要开启全域名允许：

  CORS_ALLOWED_ORIGINS = ["http://localhost:3000"] # 替换为你的React服务实际地址
  

  2. 开启跨域凭证允许：

  CORS_ALLOW_CREDENTIALS = True
  

  3. 将前端域名添加到CSRF信任列表：

  CSRF_TRUSTED_ORIGINS = ["http://localhost:3000"] # 替换为你的React服务实际地址
  

• Session配置校验（生产环境适用）
  如果前后端部署在不同的一级域名下，需要额外在settings.py添加以下配置，且必须使用HTTPS协议：

  SESSION_COOKIE_SAMESITE = "None"
  SESSION_COOKIE_SECURE = True
  CSRF_COOKIE_SAMESITE = "None"
  CSRF_COOKIE_SECURE = True
  

配置完成后，先调用一次任意Django后端接口获取sessionid和csrftoken Cookie，后续调用add to cart接口时，检查请求头是否携带了Cookie字段，同时在Django后端打印request.session.session_key，如果多次请求返回的session key一致，就不会重复创建购物车。

内容的提问来源于stack exchange，提问作者kimta-wanjohi