title: how to pass a csrf token between django and javascript
body: <p>I know very little about javascript.</p>
  <p>I have a GeoDjango project, and am adding a map view of some of the data using Leaflet.
  There is a lot of data so I am using a Leaflet uGeoJSON Layer to display the data (this allows leaflet to post a bounding box so Django can filter results and only pass visible data).</p>
  <p>I am adding leaflet to a django view.</p>
  <p>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.</p>
  <p>The documentation for [Leaflet uGeoJSON Layer][1] suggests:</p>
  <pre><code>var headers = {};
  
    // CSRF headers
    var token = jQuery(&quot;meta[name='_csrf']&quot;).attr(&quot;content&quot;);
    var header = jQuery(&quot;meta[name='_csrf_header']&quot;).attr(&quot;content&quot;);
    if (header) {
      headers[header]= token;
    }
  
    var customers = new L.uGeoJSONLayer({
      endpoint : &quot;/layers/customers&quot;,
      headers: headers
    }).addTo(map);
  </code></pre>
  <p>I added this to my javascript but token and header are always null.</p>
  <p>Here is my javascript.</p>
  <pre><code>map.js
  
  var headers = {};
  
    // CSRF headers
    var token = jQuery(&quot;meta[name='_csrf']&quot;).attr(&quot;content&quot;);
    var header = jQuery(&quot;meta[name='_csrf_header']&quot;).attr(&quot;content&quot;);
    if (header) {
      headers[header]= token;
    }
  
  // Point Styles
  var 
    DmseJobStyle = {
    fillColor: &quot;#FFFFE0&quot;,
    color: &quot;#FFFF00&quot;,
    opacity: 1,
    fillOpacity: 0.8
  }
  
  var
  ... 
    DmseJobData = new L.uGeoJSONLayer({endpoint: &quot;data.jobs/&quot;,
      usebbox: true,
      headers: headers,
      pointToLayer: function (feature, latlng) {
              return L.circleMarker(latlng, DmseJobStyle)
      },
      onEachFeature:function(feature, layer) {
          layer.bindPopup('Job: ' + feature.properties.num + '&lt;/br&gt;Desc: ' + feature.properties.desc);
      } 
    }),
  
  
  var map = L.map('map', {
      center: [45.75, -64.99],
      zoom: 10,
      layers: [osm]
  });
  
  var overlayMaps = {
      ...
      &quot;DMSE Jobs&quot;: DmseJobData,
  };
  
  </code></pre>
  <p>This is in a file map.js which is loaded in my django template using:</p>
  <pre><code>&lt;script src=&quot;{% static 'core\map.js' %}&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>If I add a breakpoint, token and header will both be null when loading the map.
  If I allow it to keep going, I get a POST ... 403 error</p>