Django搭配React项目中如何验证CSRF Token在浏览器是否正常工作

现有代码问题 #

你当前的代码逻辑存在错误：你在表单内插入的隐藏CSRF Token组件，仅适用于原生表单同步提交的场景，你现在用axios异步发送application/json格式的POST请求，这个隐藏域的token不会被axios自动携带到请求中，后端会直接返回403 CSRF校验失败的错误。

修复方案

你已经实现了getCookie方法读取csrftoken，直接将token添加到axios的请求头即可，修改Create.js里的options配置：

// 先导入getCookie方法
import getCookie from './getCookie';

const options = {
    headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': getCookie('csrftoken') // 新增这一行
    },
    // 如果是跨域请求，还要加下面这行，同时Django后端要配置CORS_ALLOW_CREDENTIALS = True
    withCredentials: true
};

额外注意：如果你的Django服务端配置了CSRF_COOKIE_HTTPONLY = True，前端JS无法读取cookie中的csrftoken，需要把该配置改为False才能正常获取token。

Chrome网络标签页查看方法 #

发起POST请求后，在网络标签页找到对应/create/接口的请求条目，点击进入详情页：

• 先查看「请求头（Request Headers）」区域，查找是否存在X-CSRFToken字段，且字段值和你Cookie中存储的csrftoken一致，存在即说明前端已经正确携带了token
• 再查看「Cookie」区域，确认请求Cookie中存在csrftoken项，说明Django已经正确下发了csrf cookie
• 如果接口最终返回状态码为200而非403 Forbidden，就说明后端CSRF校验通过，整个功能正常运行

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