csrf 令牌丢失或不正确答案

【问题标题】：csrf token is missing or incorrectcsrf 令牌丢失或不正确
【发布时间】：2017-12-10 02:16:54
【问题描述】：

遵循 StackOverflow 上推荐的很多内容。我还尝试将 {% csrf_token %} 放在 html 的各个地方，但似乎都没有。有什么建议吗？

这是我的 django 模板输入按钮

 <input id=saveWaypoints type=button value='Save your Location' disabled=disabled>

调用这个javascript

$('#saveWaypoints').click(function () {
                var waypointStrings = [];
                for (id in waypointByID) {
                    waypoint = waypointByID[id];
                    waypointStrings.push(id + ' ' + waypoint.lng + ' ' + waypoint.lat);
                };

                $.post("{% url 'waypoints-save' %}", {
                    csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
                    waypointsPayload: waypointStrings.join('\n')
                }, function (data) {
                    if (data.isOk) {
                        $('#saveWaypoints').attr('disabled', 'disabled');
                    } else {
                        alert(data.message);
                    }
                });
            });

我完整的javascript代码是

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Maps | {% block title %}{% endblock %}</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script>
        var map, marker, waypointByID = {};
        var currentObject;
        var map;
        var geocoder;

        function initialize() {
            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 5,
                center: new google.maps.LatLng(41.879535, -87.624333),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            geocoder = new google.maps.Geocoder();


        }

        $(function () {

        });




        {% for waypoint in waypoints %}
        waypointByID[{{waypoint.id}}] = {
            name: "{{waypoint.name}}",
            lat: {{waypoint.geometry.y}},
            lng: {{waypoint.geometry.x}}
        };
        {% endfor %}






        var currentObject;



        $(document).ready(function () {
            function activateWaypoints() {
                // Add waypoint click handler
                $('.waypoint').each(function () {
                    $(this).click(function() {
                        var waypoint = waypointByID[this.id];
                        var center = new google.maps.LatLng(waypoint.lat, waypoint.lng);
                        currentObject = $(this);
                        if (marker) marker.setMap();
                        marker = new google.maps.Marker({map: map, position: center, draggable: true});
                        google.maps.event.addListener(marker, 'dragend', function() {
                            var position = marker.getPosition();
                            waypoint.lat = position.lat();
                            waypoint.lng = position.lng();
                            currentObject.html(waypoint.name +
                                ' (' + waypoint.lat +
                                ', ' + waypoint.lng + ')');
                            $('#saveWaypoints').removeAttr('disabled');
                        });
                        map.panTo(center);
                    }).hover(
                        function () {this.className = this.className.replace('OFF', 'ON');},
                        function () {this.className = this.className.replace('ON', 'OFF');}
                    );
                });
            }
            $('#saveWaypoints').click(function () {
                var waypointStrings = [];
                for (id in waypointByID) {
                    waypoint = waypointByID[id];
                    waypointStrings.push(id + ' ' + waypoint.lng + ' ' + waypoint.lat);
                };

                $.post("{% url 'waypoints-save' %}", {
                    csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
                    waypointsPayload: waypointStrings.join('\n')
                }, function (data) {
                    if (data.isOk) {
                        $('#saveWaypoints').attr('disabled', 'disabled');
                    } else {
                        alert(data.message);
                    }
                });
            });
            activateWaypoints();
        });
    </script>

    <style>
        body {font-family: sans-serif}
        #map {width: 1000px; height: 500px}
        #waypoints {overflow: auto; width: 500px; height: 100px}
        .linkOFF {color: darkblue}
        .linkON {color: white; background-color: darkblue}
    </style>


    </head>

    <body>
        <div id="nav">
            <a href="/">home</a> |
        {% if user.is_authenticated %}
            welcome {{ user.username }}
            (<a href="/logout">logout</a>)
        {% else %}
            <a href="/login/">login</a> |
            <a href="/register/">register</a>
        {% endif %}
        </div>
        <h1>{% block head %}{% endblock %}</h1>
        {% block content %}{% endblock %}
    </body>

    <body onload='initialize()'>
        <div id=map></div>
        <div id=waypoints>
            {% for waypoint in waypoints %}
                <div id={{waypoint.id}} class='waypoint linkOFF'>
                    {{waypoint.name}} ({{waypoint.geometry.y}}, {{waypoint.geometry.x}})
                </div>
            {% endfor %}

        </div>
        <input id=saveWaypoints type=button value='Save your Location' disabled=disabled>
    </body>

</html>

我的views.py是

def save(request):
    'Save waypoints'


    for waypointString in request.POST.get('waypointsPayload', '').splitlines():
        waypointID, waypointX, waypointY = waypointString.split()
        waypoint = Waypoint.objects.get(id=int(waypointID))
        waypoint.geometry.set_x(float(waypointX))
        waypoint.geometry.set_y(float(waypointY))
        waypoint.save()
    return HttpResponse(simplejson.dumps(dict(isOk=1)), mimetype='application/json')

请有任何建议。谢谢

【问题讨论】：

Django 建议在这里 docs.djangoproject.com/en/1.11/ref/csrf/… 。它将设置请求标头。
我尝试了该代码，但模板未显示地图
你的地图不应该与这个 ajax 调用有关。这是一个谷歌地图API。您可以检查您的 django 视图是否收到正确的发布请求。如果是这样，您的 ajax 问题就解决了。
您只能在您的帖子 ajax btw 中添加beforeSend
你能解释一下吗？我对这一切都不熟悉。

标签： javascript django django-templates

【解决方案1】：

这对我有用：

$.post("{% url 'waypoints-save' %}", {
  'csrfmiddlewaretoken': '{{ csrf_token }}',
}

【讨论】：