Django动态生成模态框时{% csrf_token %}渲染为字符串的解决方法

因为Django的模板标签是在服务器端渲染页面时解析的，动态通过JS添加的模板标签只会被当作字符串处理，所以得换几种方式来嵌入CSRF token：

方法一：提前存储CSRF Token，动态生成输入框 #

在页面的静态HTML部分（比如<body>开头）添加一个隐藏的存储token的元素：

<input type="hidden" id="global-csrf-token" value="{{ csrf_token }}">

然后在你的JS函数里，手动构建CSRF的隐藏输入框并插入到表单中：

// 获取提前存储的token
const csrfToken = document.getElementById('global-csrf-token').value;
// 构建表单HTML时加入token输入框
let formHtml = `
  <form id="dynamic-form" method="post">
    <!-- 其他表单字段 -->
    <input type="hidden" name="csrfmiddlewaretoken" value="${csrfToken}">
    <button type="submit">提交</button>
  </form>
`;
// 将formHtml插入模态框
document.getElementById('modal-content').innerHTML = formHtml;

方法二：提前渲染CSRF Token模板，动态复用 #

在页面里添加一个隐藏的模板容器，提前让Django渲染好CSRF token的HTML：

<div id="csrf-template" style="display: none;">
  {% csrf_token %}
</div>

之后在JS里直接获取这个模板的内容，插入到动态表单中：

// 获取已渲染好的CSRF HTML片段
const csrfHtml = document.getElementById('csrf-template').innerHTML;
// 构建表单时拼接进去
let formHtml = `
  <form id="dynamic-form" method="post">
    <!-- 其他表单字段 -->
    ${csrfHtml}
    <button type="submit">提交</button>
  </form>
`;
// 插入模态框
document.getElementById('modal-content').innerHTML = formHtml;

方法三：如果用AJAX提交表单 #

如果你的表单是通过AJAX提交的，可以不用在表单里加隐藏输入框，而是直接在请求头里带上CSRF token：

const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
// 提交AJAX请求时设置请求头
fetch('/your-submit-url/', {
  method: 'POST',
  headers: {
    'X-CSRFToken': csrfToken,
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: new FormData(document.getElementById('dynamic-form'))
});

这几种方法都能避开动态渲染模板标签的问题，根据你的实际场景选就行。

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