React前端与Django后端实现Cookie存储失败的问题排查

我一眼就瞅到问题出在后端代码的返回逻辑上，咱们拆解来看：

核心问题分析 #

当后端检测到请求里没有cookie时，你确实创建了一个response对象并调用了set_cookie方法，但最后你并没有返回这个带Cookie设置的response，而是新建了一个完全无关的错误响应返回给前端。浏览器根本收不到那个带Cookie的响应头，自然没法存储Cookie，同时后端会打印not store。

修复后的后端代码 #

把错误响应的逻辑合并到你设置了Cookie的response对象里就行，修改后的代码如下：

from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework import status

class StoreCookie(APIView):
    def get(self, request):
        if 'cookie' in request.COOKIES:
            value = request.COOKIES['cookie']
            print('store')
            # 如果存在cookie，返回空响应或者你需要的内容
            return Response()
        else:
            print('not store')
            # 创建response对象并设置Cookie，同时携带错误信息和状态码
            response = Response({"error": 'This Item Not Available For Now'}, status=status.HTTP_400_BAD_REQUEST)
            response.set_cookie('cookie', 'MY COOKIE VALUE', httponly=False)
            # 返回这个已经设置好Cookie的response
            return response

关键修改点 #

• 不再创建两个独立的response对象，而是直接在要返回的错误响应上添加Cookie设置
• 确保最终返回的response是包含Set-Cookie响应头的那个对象

前端代码确认 #

你的前端代码里axios.get加上{withCredentials: true}是完全正确的，这个配置让浏览器在跨域请求时也能携带和存储Cookie，不用修改。

验证方式 #

1. 调用接口后，打开浏览器开发者工具（F12），切换到Application标签页，查看左侧的Cookies选项，检查是否存在名为cookie、值为MY COOKIE VALUE的Cookie
2. 再次调用接口时，后端应该会打印store，因为此时请求已经携带了Cookie

内容的提问来源于stack exchange，提问作者yaseen1998