django csrf cookie不再有效

Question

我不明白为什么，但Django已经停止在回复中包含csrf cookie。我启用了中间件，尝试使用RequestContext并使用渲染。我甚至尝试过使用csrf_protect和requires_csrf_token装饰器。

我正在开发一个开发服务器，我可以在使用RequestContext后打印上下文，它似乎包含一个csrf_token。

但是当我使用Chrome的inspect元素查看实际的标题时，csrf_token不在那里，当我使用控制台并输入没有csrf标记的“document.cookie”时。

HELP！

这是一个示例视图

@requires_csrf_token
def index(request):
    context = RequestContext(request, {'foo':'bar'})
    print context
    return render(request, 'index.html', context)

CSRF令牌似乎在上下文中：

{u'csrf_token':         <django.utils.functional.__proxy__ object at 0x1025ab990>}, ...

但它无法通过......

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Cookie:__utma=96992031.468590559.1369255550.1369255550.1369255550.1; __utmb=96992031.17.10.1369255550; __utmc=96992031; __utmz=96992031.1369255550.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
Host:127.0.0.1:8000
Referer:http://127.0.0.1:8000/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.65 Safari/537.31

更新：这是我正在使用的模板：

{% extends "base.html" %}

{% block hello %}
Basic Stock Event Charts
{% endblock %}

{% block content %}


  <div id="leftsidebar">
  <p>Use this tool to graph a time series data for a security. You can graph a security and
  four other features such as volume, call option volume, or implied volatility. The tool will 
  zoom in on the date of interest to show the target audience the changes in the selected
  vaiables preceeding the event. Because of large movement in variables before the announcement,
  it may be helpful to use the minimum and maximum tools to zoom in on smaller movements ahead
  of the event. </p>
    <div class="ui-widget inline">
        <label for="securities">1. Type in a ticker symbol</label>
        <input id="securities">
    </div>
    <div class="inline"><input type="button" id="reload" value="Reset" class="hide" /></div>

    <label for="datepicker">2. Pick your event date of interest.</label>
    <input type="text" id="datepicker" disabled />

    <label>3. Choose other series to graph.</label>
    <p><strong>Primary Axis</strong></p>
      Left Axis: <select id="series1" class="selectpicker span2" disabled><option value=""></option></select>
        <div id="series1minmax" class="hide">
            Min <input type="text" id="min1" class="input-mini" />&nbsp;
            Max <input type="text" id="max1" class="input-mini" />
        </div><input type="button" id="addaxes1" value="Graph" class="hide" />
        <input type="button" id="removeaxes1" value="Remove" class="hide" /><br />

      <br/>Right Axis: <select id="series2" class="selectpicker span2" disabled><option value=""></option>></select>
        <div id="series2minmax" class="hide">
            Min <input type="text" id="min2" class="input-mini" />&nbsp;
            Max <input type="text" id="max2" class="input-mini" />
        </div><input type="button" id="addaxes2" value="Graph" class="hide" />
        <input type="button" id="removeaxes2" value="Remove" class="hide" /><br />

        <input type="button" id="addextraaxis" value="Add Additional Axis" disabled/><br />

      <div id="additional" class="hide">
      <p><strong>Additional Axis</strong></p>
      Left Axis: <select id="series3" class="selectpicker span2" disabled><option value=""></option></select>
        <div id="series3minmax" class="hide">
            Min <input type="text" id="min3" class="input-mini" />&nbsp;
            Max <input type="text" id="max3" class="input-mini" />
        </div><input type="button" id="addaxes3" value="Graph" class="hide" />
        <input type="button" id="removeaxes3" value="Remove" class="hide" /><br />

      <br/>Right Axis: <select id="series4" class="selectpicker span2" disabled><option value=""></option>></select>
        <div id="series4minmax" class="hide">
            Min <input type="text" id="min4" class="input-mini" />&nbsp;
            Max <input type="text" id="max4" class="input-mini" />
        </div><input type="button" id="addaxes4" value="Graph" class="hide" />
        <input type="button" id="removeaxes4" value="Remove" class="hide" /><br />
      </div>

  </div>
  <div id="rightsidebar">
    <div id="container" class="hide"></div>
    </div>
  </div>


<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/stock/highcharts-more.js"></script>

<script>

$(function() {
  $("#removefromchart").click(function() {
      var conceptName = $('#savedseries').find(":selected").remove();
  });

  $("#reload").click(function() {
      location.reload();
  })

  $("#addextraaxis").click(function() {
      $("#additional").removeClass("hide");
      this.disabled = true
      $("#addextraaxis").addClass("hide");
      var chart = $("#container").highcharts();
      chart.setSize(null, 650);
  })
});

$(function() {
        $("#series1").change(function() {   
            $("#addaxes1").removeClass("hide");
        });
        $("#series2").change(function() {
            $("#addaxes2").removeClass("hide");
        });
        $("#series3").change(function() {
            $("#addaxes3").removeClass("hide");
        });
        $("#series4").change(function() {
            $("#addaxes4").removeClass("hide");
        });
});


$(function() {
    function setExtreme(isMin, axis, value) {
        console.log("fired");
        var chart = $('#container').highcharts();
        if (isMin) { 
            console.log(value + " " + chart.yAxis[axis].getExtremes()["max"])
            chart.yAxis[axis].setExtremes(value, chart.yAxis[axis].getExtremes()["max"]);
        } else {
            console.log(value + " " + chart.yAxis[axis].getExtremes()["min"])
            chart.yAxis[axis].setExtremes(chart.yAxis[axis].getExtremes()["min"], value);
        }
        console.log(value);
    }


    function getAxisNumber(series) {
        var indicies = {}
        $.each(chart.yAxis, function(index, element) {
            indicies[element.options.id] = index;
            console.log(element.options.id);
        });
        return indicies[series]
    }

    $("#max1").change(function() {setExtreme(0, getAxisNumber("#series1"), this.value)});
    $("#min1").change(function() {setExtreme(1, getAxisNumber("#series1"), this.value)});
    $("#max2").change(function() {setExtreme(0, getAxisNumber("#series2"), this.value)});
    $("#min2").change(function() {setExtreme(1, getAxisNumber("#series2"), this.value)});
    $("#max3").change(function() {setExtreme(0, getAxisNumber("#series3"), this.value)});
    $("#min3").change(function() {setExtreme(1, getAxisNumber("#series3"), this.value)});
    $("#max4").change(function() {setExtreme(0, getAxisNumber("#series4"), this.value)});
    $("#min4").change(function() {setExtreme(1, getAxisNumber("#series4"), this.value)});

});

$(function()
        {
          $("#removefromchart").click(function()
          {
              var conceptName = $('#savedseries').find(":selected").remove();
          });
        });

$(function() {

    function addPlotLine(ts) {
        var chart = $('#container').highcharts();
        chart.xAxis[0].addPlotBand({
            from: ts,
            to: ((ts + 86400000) * 365),
            color: 'rgba(68, 170, 213, 0.2)',
            id: 'tsband'
        });
        chart.xAxis[0].addPlotLine({
            value: ts,
            color: 'rgb(255, 0, 0)',
            width: 1,
            id: 'tsline'
        });
        chart.xAxis[0].setExtremes(ts - (86400000 * 30), ts + 86400000)
        }

    function removeEventIfExists() {
        var chart = $("#container").highcharts()
        chart.xAxis[0].removePlotBand("tsband");
        chart.xAxis[0].removePlotLine("tsline");
    }

    $("#datepicker").datepicker({
        showButtonPanel: true,  /*added by oussama*/
        changeMonth: true, /*added by oussama*/
        changeYear: true, /*added by oussama*/
        dateFormat: 'yy-mm-dd',
        onSelect: function (dateText, inst) {
            utcDate = Date.UTC(dateText.split("-")[0], dateText.split("-")[1] - 1, dateText.split("-")[2]);
            removeEventIfExists();
            addPlotLine(utcDate);
            $("#series1").removeAttr("disabled");
            $("#series2").removeAttr("disabled");
            $("#series3").removeAttr("disabled");
            $("#series4").removeAttr("disabled");
            $("#addextraaxis").removeAttr("disabled");
            var ticker = $("#securities").val();
            var date = $("#datepicker").val();
            chart.setTitle({text: ticker + " around " + date});
        }
    });


  });

$(function() {

    function createChart() {
        var chart = $('#container').highcharts();
        var options = {chart: { 
                           renderTo: 'container',
                           height: 450,
                       },
                       events: {
                           load: function(event) {
                               this.setExtremes();
                           }
                       },
                       rangeSelector: {
                         enabled: false,
                       },
                       exporting: {
                           enabled: false,
                       },
                       navigator: {
                             enabled: true,
                             series: { id: 'navigator' },
                       },
                        yAxis: [{
                            title: {
                                text: 'Price'
                            },
                            height: 150,
                        }],


            },

        chart = new Highcharts.StockChart(options);
        return chart;
    }

  $("#securities").autocomplete({
    source: "/api/get_securities/",
    minLength: 1,
    select: function(event, ui) {
        var ticker = ui.item.label;
        getSeries(ticker);
        chart = createChart();
        getTimeSeriesData(ticker + "|PX_LAST", 0);
        $('#container').show();
        $('#datepicker').removeAttr("disabled");
        $('#reload').removeClass("hide");
        chart.setTitle({text: ticker});
        this.disabled = 'disabled';
    },
  });
});

$(function() {

    function removeAxes(id) {
        var chart = $('#container').highcharts();
        chart.get(id).remove();
    }

    $("#removeaxes1").click(function() {
        console.log("removeaxes1 clicked");
        removeAxes("#series1");
        $("#removeaxes1").addClass("hide");
        $("#series1minmax").addClass("hide");
        $("#series1minmax").removeClass("inline");
        $("#series1").val("");
        $("#min1").val("");
        $("#max1").val("");
        $("#series1").removeAttr("disabled");
    });

    $("#removeaxes2").click(function() {
        console.log("removeaxes2 clicked");
        removeAxes("#series2");
        $("#removeaxes2").addClass("hide");
        $("#series2minmax").addClass("hide");
        $("#series2minmax").removeClass("inline");
        $("#series2").val("");
        $("#min2").val("");
        $("#max2").val("");
        $("#series2").removeAttr("disabled");
    });

    $("#removeaxes3").click(function() {
        console.log("removeaxes3 clicked");
        removeAxes("#series3");
        $("#removeaxes3").addClass("hide");
        $("#series3minmax").addClass("hide");
        $("#series3minmax").removeClass("inline");
        $("#series3").val("");
        $("#min3").val("");
        $("#max3").val("");
        $("#series3").removeAttr("disabled");
    });

    $("#removeaxes4").click(function() {
        console.log("removeaxes4 clicked");
        removeAxes("#series4");
        $("#removeaxes4").addClass("hide");
        $("#series4minmax").addClass("hide");
        $("#series4minmax").removeClass("inline");
        $("#series4").val("");
        $("#min4").val("");
        $("#max4").val("");
        $("#series4").removeAttr("disabled");
    });

    function addSeries(id, minMaxId, isOpposite, isAdditional) {

        var chart = $('#container').highcharts();
        indicies = {}
        console.log('climlckedaddaxes');
        var series = $(id).val()
        var top = 210
        if (isAdditional) top = 380
        var options = {
            title: {
                text: series.split("|")[1]
            },
            top: top,
            height: 150,
            opposite: isOpposite,
            id: id,
            offset: -30
        }
        chart.addAxis(options)
        $.each(chart.yAxis, function(index, element) {
            indicies[element.options.id] = index;
            console.log(element.options.id);
        });
        getTimeSeriesData(series, indicies[id]);
        $(minMaxId).removeClass("hide")
        $(minMaxId).addClass("inline")
    }

    $("#addaxes1").click(function() {   
        addSeries('#series1', "#series1minmax", false, false);  
        $("#addaxes1").addClass("hide")
        $("#removeaxes1").removeClass("hide")
        $("#series1").attr("disabled", "disabled")
    });

    $("#addaxes2").click(function() {           
        addSeries('#series2', "#series2minmax", true, false);
        $("#addaxes2").addClass("hide")
        $("#removeaxes2").removeClass("hide")
        $("#series2").attr("disabled", "disabled")
    });

    $("#addaxes3").click(function() {           
        addSeries('#series3', "#series3minmax", false, true);
        $("#addaxes3").addClass("hide")
        $("#removeaxes3").removeClass("hide")
        $("#series3").attr("disabled", "disabled")
    });

    $("#addaxes4").click(function() {           
        addSeries('#series4', "#series4minmax", true, true);
        $("#addaxes4").addClass("hide")
        $("#removeaxes4").removeClass("hide")
        $("#series4").attr("disabled", "disabled")
    });

})

$('#addtochart').click(function() {
  var selectedValues = $('#seriesselector').val();
  $.each(selectedValues, function(index, value) {
        $('#savedseries').append($('<option>', {
                                                value: value,
                                                text: value,
                                                selected: true,
                                                }));
        $('#seriesselector option[value="' + value +'"]').remove();
  });
});

function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

function parseDate(inputdate, value) {
    var date = inputdate;
    var year = parseInt(date.split("-")[0]);
    var month = parseInt(date.split("-")[1]) - 1;
    var day = parseInt(date.split("-")[2]);
    var outputdate = Date.UTC(year, month, day);
    if (year == 2013 && month == 3) {
        //console.log(inputdate, outputdate, value);
    }
    return outputdate;
};

function getTimeSeriesData(seriesName, axis) {
var csrftoken = getCookie('csrftoken');
console.log('csrftoken is :: ' + csrftoken);
  $.ajax({ // create an AJAX call...
                beforeSend: function(xhr, settings) {
                    var csrftoken = getCookie('csrftoken');
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                },
                data: {'seriesName': seriesName }, // get the form data
                type: 'POST',
                url: '/api/get_time_series_data/',
                success: function(response) { // on success..
                    console.log(response);
                    var series = {}
                    series['name'] = response[0]['series_name'];
                    series['data'] = []
                    $.each(response, function(index, value) {
                        series['data'][index] = [
                            parseDate(response[index]['date'], response[index]['value']), 
                            parseFloat(response[index]['value'])
                            ];
                    });
                   series['yAxis'] = axis
                   series['marker'] = {
                           enabled : true,
                           radius : 3
                           }
                   var chart = $('#container').highcharts();
                   chart.addSeries(series);
                   var nav = chart.get('navigator');
                   if (axis == 0) nav.setData(series['data']);          
                }
            });
            return false;
};

function getSeries(ticker) {
var csrftoken = getCookie('csrftoken');  
  $.ajax({ // create an AJAX call...
                beforeSend: function(xhr, settings) {
                    var csrftoken = getCookie('csrftoken');
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                },
                data: {'ticker': ticker }, // get the form data
                type: 'POST',
                url: '/api/get_series/',
                success: function(response) { // on success..
                    $('#seriesselector').empty()
                    for (var i = 0; i < response.length; i++) {
                        if (response[i].value == 'PX_LAST') continue;
                        $('#series1').append($('<option>', {
                                value: ticker + "|" + response[i].value,
                                text: response[i].value
                        }));
                        $('#series2').append($('<option>', {
                            value: ticker + "|" + response[i].value,
                            text: response[i].value
                        }));
                        $('#series3').append($('<option>', {
                            value: ticker + "|" + response[i].value,
                            text: response[i].value
                        }));
                        $('#series4').append($('<option>', {
                            value: ticker + "|" + response[i].value,
                            text: response[i].value
                        }));
                    }
                }
            });
            return false;
};

</script>

{% endblock %}

Answer 1

原来你需要

{% csrf_token %}

无论您是否发布html表单。我只是在做AJAX请求，但Django不会在响应头中包含令牌，除非它看到它是模板。