如何在 django 和 javascript 之間傳遞 csrf 令牌

Question

我對 javascript 知之甚少。

我有一個 GeoDjango 項目，並且正在使用 Leaflet 添加一些數據的 map 視圖。 有很多數據，所以我使用 Leaflet uGeoJSON 層來顯示數據（這允許 leaflet 發布邊界框，因此 Django 可以過濾結果僅可見數據）。

我將 leaflet 添加到 django 視圖中。

I have this working with a function based view in django which I decorate with @csrf_exempt, but would like to pass the proper csrf headers so I can use the generic class based django views.

[Leaflet uGeoJSON Layer][1] 的文檔建議：

var headers = {};

  // CSRF headers
  var token = jQuery("meta[name='_csrf']").attr("content");
  var header = jQuery("meta[name='_csrf_header']").attr("content");
  if (header) {
    headers[header]= token;
  }

  var customers = new L.uGeoJSONLayer({
    endpoint : "/layers/customers",
    headers: headers
  }).addTo(map);

我將此添加到我的 javascript 但令牌和 header 始終是 null。

這是我的 javascript。

map.js

var headers = {};

  // CSRF headers
  var token = jQuery("meta[name='_csrf']").attr("content");
  var header = jQuery("meta[name='_csrf_header']").attr("content");
  if (header) {
    headers[header]= token;
  }

// Point Styles
var 
  DmseJobStyle = {
  fillColor: "#FFFFE0",
  color: "#FFFF00",
  opacity: 1,
  fillOpacity: 0.8
}

var
... 
  DmseJobData = new L.uGeoJSONLayer({endpoint: "data.jobs/",
    usebbox: true,
    headers: headers,
    pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, DmseJobStyle)
    },
    onEachFeature:function(feature, layer) {
        layer.bindPopup('Job: ' + feature.properties.num + '</br>Desc: ' + feature.properties.desc);
    } 
  }),


var map = L.map('map', {
    center: [45.75, -64.99],
    zoom: 10,
    layers: [osm]
});

var overlayMaps = {
    ...
    "DMSE Jobs": DmseJobData,
};

這是在我的 django 模板中加載的文件 map.js 中，使用：

<script src="{% static 'core\map.js' %}"></script>

如果我添加斷點，則加載 map 時，我添加斷點，令牌和 header 都將是 null。 如果我允許它繼續運行，我會收到一個 POST... 403 錯誤

Answer 1

在我的項目中，我使用：

var csrf_token = $('input[name="csrfmiddlewaretoken"]').val();