Django与React 前后端分离开发时遇到CORS跨域问题导致的Session无法传递的问题

网上关于如何解决Django的跨域问题的文章有很多;
一般来说,参考django解决跨域请求的问题 - AFei0018-博客 - CSDN博客这篇文章,装一下django-cors-headers,settings.py里设置一下中间件即可解决。
但当和前端结合在一起工作时,解决跨域还需要前端的协助。以使用React为例,如果是用ajax发请求,可以参考这篇Django配置Ajax跨域调用/设置Cookie - 孔天逸’Blog - CSDN博客
但仅仅设置后端是不够的。当前后端通信时仍然会遇到cookie为空的情况。
我的开发场景为React+axios,通过搜索了解到为了解决cookie的问题,使用axios时,要在import axios的时候,设置withCredentials参数为true(aixos默认为false),即:

axios.defaults.withCredentials=true;

这样前端才能正常地发送cookie到后端。

但到这一步,虽然cookie可以被后端正常收到,但是Django自带的session却始终为空。
我们知道session的实现是依赖于cookie的, 简单来说,session的数据存储在服务器(如Django链接的数据库)中,服务器通过cookie将session id传到前端,前端再向请求后端发请求时会同时发回session id,这样经过Django的中间件的处理,我们可以方便地在view中使用session作权限管理等。但是在本场景下,当前端服务器和后端服务器不在同一主机(ip)时,session中的内容始终无法正常地被后端访问到,session始终为空。我搜遍了各种解决方法,几乎遍历式地尝试了各种设置,始终不能成功。经过手动在cookie中设置“sessionid”字段,发现原因应该为Django的中间件会直接过滤掉该字段,从而导致客户端无法保存sessionid,进而在之后客户端向服务端发送url请求时,无法把正确的sessionid发给服务端,自然Django的中间件也无法获得对应的session数据了。
而过滤的原因是因为Django的SESSION_COOKIE_DOMAIN字段限制了session的cookie的作用域,使得session id只能局限于服务器本地网中,我们可以通过改变这个参数来改变作用域,但Django的这个参数只能指定一个域名。为了以后拓展的方便,我手动在cookie中添加了一个"session_id"参数,手动指定的参数可以被传递给各个网址。然后前端再从response中提取这个参数,保存到前端的cookie中,这样后端就可以正常访问cookie,从而可以正常从数据库中取出对应的session。

前端代码示例:

import axios from 'axios'
import {
   LOGIN_EVENT, FETCH_RECS, SET_FAVORITES}
  • 3
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值