如何在Django+Element-UI的HTML中正确配置CSRF Token？

问题根源 #

你当前的问题是把{% csrf_token %}放在了{% verbatim %}标签内部——这个标签的作用是让Django模板引擎不解析内部的模板语法，所以{% csrf_token %}被直接当成文本渲染出来，无法生成有效的CSRF Token隐藏输入框，导致POST请求触发CSRF防护拦截。

解决方案 #

1. 先将{% csrf_token %}移出verbatim标签 #

把{% csrf_token %}放在{% verbatim %}的外面，让Django能正常解析它，生成包含Token的隐藏input标签：

{% block mainbody %}
{% csrf_token %} <!-- 移到verbatim标签外，Django会自动渲染成<input type="hidden" name="csrfmiddlewaretoken" value="xxx"> -->
{% verbatim %}
<!-- 你的Vue模板内容 -->
<div id="app2" class="container">
  ...
</div>
{% endverbatim %}

2. 两种携带CSRF Token的方式 #

方式一：手动获取Token并加到请求参数

在Axios发送POST请求时，获取页面上的CSRF Token值，和表单数据一起提交：

onSubmit() {
  this.$refs.deliveryInfoForm.validate((valid) => {
    if (valid) {
      if (this.addDeliveryFormType === 1) {
        // 获取CSRF Token
        const csrfToken = document.querySelector('input[name="csrfmiddlewaretoken"]').value;
        // 组装请求参数，带上Token
        const params = new URLSearchParams({
          ...this.deliveryInfo,
          csrfmiddlewaretoken: csrfToken
        });
        axios.post(ToDJ('deliveryJob'), params).then(res => {
          // 后续处理逻辑
          if (res.data.code === 0) {
            this.NotifySuc("Job Submitted!");
            Object.assign(this.deliveryInfo, this.$options.data().deliveryInfo);
            this.getDeliveryList();
            this.getOrderIDList();
          } else {
            this.NotifyFail(res.data.data);
            Object.assign(this.deliveryInfo, this.$options.data().deliveryInfo);
          }
        })
      }
    }
  })
}

方式二：配置Axios自动携带Token（推荐）

Django默认会把CSRF Token存在名为csrftoken的Cookie中，你可以配置Axios全局自动从Cookie读取Token，并加到请求头里，这样所有POST请求都会自动携带，无需逐个修改：

// 在Vue初始化之前添加这段配置
axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = 'X-CSRFToken';

// 之后你的Axios请求无需手动处理Token，直接正常发送即可
axios.post(ToDJ('deliveryJob'), new URLSearchParams(this.deliveryInfo)).then(res => {
  // 后续处理逻辑
})

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