Django+React购物车(session)异常：React端无法操作及获取数据

问题现象 #

• 手动访问添加商品接口可成功写入购物车，但React前端调用该接口无效果；
• 手动访问http://localhost:8000/cart/details/能看到购物车数据，但React端无法获取该接口返回值。

现有实现代码 #

urls.py #

from django.urls import path
from . import views

urlpatterns = [
    path('add/<int:id>/<slug:slug>/<int:quantity>/', views.cart_add),
    path('details/' , views.cart_details ),
]

views.py #

@api_view(['GET'])
def cart_add(request, id, slug, quantity):
    cart = request.session.get('cart' , {})
    
    product = get_object_or_404(Produit, id=id, slug=slug)
    
    cart[str(id)] = {"id" :id , "product": ProduitSerializer(product).data , "quantity": quantity}
    
    # Save the modified cart in the session
    request.session["cart"] = cart
    return Response({"cart": cart})

# 补充缺失的cart_details视图
@api_view(['GET'])
def cart_details(request):
    cart = request.session.get('cart', {})
    return Response({"cart": cart})

Cart.js #

import React, { useState, useEffect } from 'react';
import axios from "axios";

// 全局配置axios携带cookie
axios.defaults.withCredentials = true;

export default function Cart(props){

    const [cart , setCart] = useState([])

    useEffect(() => {
        const cart_details = async () =>{
           try{
             const response = await axios.get(`http://localhost:8000/cart/details/`);
             console.log(response.data.cart)
             setCart(response.data.cart)
           }catch(err){
             alert(err)
           }
        }
        cart_details()
    },[])

    // 示例：添加商品的函数
    const addToCart = async (id, slug, quantity) => {
        try {
            await axios.get(`http://localhost:8000/cart/add/${id}/${slug}/${quantity}/`);
            cart_details(); // 更新购物车数据
        } catch (err) {
            alert(err);
        }
    }
    
    return (
    <section className="h-100" style={{backgroundColor :"#eee"}}>
      <div className="container h-100 py-5">
        <div className="row d-flex justify-content-center align-items-center h-100">
        {/* 这里可以添加购物车列表渲染逻辑 */}
        </div>
      </div>
    </section>
    )
}

解决步骤 #

1. 配置跨域支持（django-cors-headers） #

跨域请求会导致Django的Session Cookie无法被React端携带，这是核心问题。

• 安装依赖：

  pip install django-cors-headers
  

• 修改settings.py：

  INSTALLED_APPS = [
      # 原有APP
      'corsheaders',
  ]
  
  MIDDLEWARE = [
      'corsheaders.middleware.CorsMiddleware',  # 放在CommonMiddleware之前
      'django.middleware.common.CommonMiddleware',
      # 原有中间件
  ]
  
  # 允许React所在的域名（本地开发通常是3000端口）
  CORS_ALLOWED_ORIGINS = [
      "http://localhost:3000",
  ]
  
  # 允许携带Cookie（必须开启，否则Session无法共享）
  CORS_ALLOW_CREDENTIALS = True
  

2. 调整Django Session Cookie设置 #

在settings.py中添加：

# 允许跨域传递Cookie，本地开发用Lax即可
SESSION_COOKIE_SAMESITE = 'Lax'
# 本地HTTP环境下关闭Secure，HTTPS环境需设为True
SESSION_COOKIE_SECURE = False

3. 确保React请求携带Cookie #

在React项目中，给axios设置withCredentials: true，可以全局配置（如上面Cart.js示例），也可以在单个请求中设置：

axios.get(url, { withCredentials: true })

4. 验证接口请求方式 #

• cart_add接口是GET请求，React调用时必须用GET方式；
• 如果后续需要改为POST（更符合REST规范），需同步修改视图的@api_view(['POST'])和React的请求方法。

验证方式 #

1. 重启Django和React服务；
2. 在React端调用添加商品接口后，手动访问/cart/details/检查数据是否同步；
3. 查看浏览器开发者工具的Network面板，确认请求头中包含Cookie字段，且响应头有Access-Control-Allow-Credentials: true。

内容的提问来源于stack exchange，提问作者Reda El Eskouni