Django跨域请求无法传递Cookie的解决

问题

在使用 Django 配合 Vue 进行前后端分离架构开发时，经常遇到跨域访问场景下，尽管后端 Django 使用了 HttpResponse 的 set_cookie 方法设置 Cookie，但浏览器端却无法成功获取或保存该 Cookie 的情况。

解决方法

解决此问题需从后端和前端两方面入手。后端推荐使用 django-cors-headers 库来处理跨域配置，需修改 Django 项目的 settings.py 文件以启用相关中间件和配置项。

具体方案：

Flask和Django中解决跨域请求问题

前端方面，需对 axios 请求库进行特定配置，以允许浏览器在跨域请求中携带或获取 Cookie 信息。

axios.defaults.withCredentials = true;

Django 之 Cookie 操作

from django.http import HttpResponse
# 设置 Cookie
response = HttpResponse('OK')
response.set_cookie('key', 'value')
# 获取 Cookie
request.COOKIES['key']
request.COOKIES.get['key']
# 删除 Cookie
response.delete_cookie('key')

补充：【解决方案】前后端分离之后，请求跨域无法传递cookie的问题

前端关键代码：

如图所示，在 axios 请求配置中添加 withCredentials: true 即可开启凭证传递。

当然，这只是前端打开一个开口而已，后端做的事情可就多了。

如图所示，后端服务在进行跨域处理的时候，需要将 Access-Control-Allow-Credentials 设为 true 即可。

原理：

以上前后端设置的ture属性（withCredentials、Access-Control-Allow-Credentials），都是允许跨域发送cookie的一个开关设置，需要前后端都做到打开模式。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。如有错误或未考虑完全的地方，望不吝赐教。