Question

更新：我发现了问题（我认为）。我不认为这本身就是浏览器问题，而是速度问题。当我打印出csrftoken时：

var csrftoken = getCookie('csrftoken');
console.log(csrftoken)

在我的本地计算机中，我在控制台中获取令牌。但是在我的实时版本中，toke为null。我会为此提出一个新问题，因为实际问题已经发生了很大变化。

编辑：根据朋友的建议，我已将输入和按钮放入带有{$ csrf_token％}标签的表单中。我也在ajax帖子中传递'csrfmiddlewaretoken'。这在firefox中也不再适用，但我认为方法正在改进，因为这种方法似乎适合他：/。我已经更新了问题的代码片段以符合当前的实现

” '下面的原始问题 “

对于Django和Web开发人员来说，我是初学者，我正在尝试设置一个简单的应用程序。基本上，我想要做的是有一个输入框和一个按钮。单击该按钮时，输入框的内容将使用ajax回发到服务器并被视图捕获。然后我将在视图中使用输入框的内容并发回一个简单的json对象。代码：

HTML

<div class="input-text">
                Enter the Map ID provided to you by ... below
            </div>

            <form onsubmit="return false;">
                {% csrf_token %}
                <input type="text" id="map-id-input">
                <button id="map-id-btn" class='btn btn-default custom-btn' onclick="checkMapID()">
                    Go 
                </button>
             </form>

的JavaScript

function checkMapID() {
var mapId = $("#map-id-input").val();
$.ajax({
    url: "check_map_id/", 
    type: "POST",
    dataType: "json", 
    data: {
        csrfmiddlewaretoken: '{{ csrf_token }}',
        map_id: mapId,
    },
    success: function(status_dict) {
        if (status_dict.status === 1) {
            $("#status").html("Valid map ID <br> Loading Data...")
            window.location = status_dict.url;
        }
        else {
            $("#status").html("Invalid map ID. Please try again, or contact MRCagney")
        }
    },
    error: function(result) {
        console.log(result)
    }
});

}

Django网址

url(r'^check_map_id/$', views.check_map_id),

Django View

@ensure_csrf_cookie
def check_map_id(request):
map_id = request.POST['map_id']

if map_id not in GEOJSON_LOOKUP.keys():
    status = json.dumps({
        'status': 0,
        'url': '',
    })  
    return HttpResponse(status, content_type="application/json")
else:
    status = json.dumps({
        'status': 1,
        'url': reverse('map', args=(map_id,)),
    })
    return HttpResponse(status, content_type="application/json")

这就是我想要做的事情。我应该说，我已经添加了所需的代码（在django文档中定义）来设置ajax头：

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;
}

var csrftoken = getCookie('csrftoken');

function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
    crossDomain: false, // obviates need for sameOrigin test
    beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});

这在Firefox中运行良好，但在Chrome中，每当我点击按钮时，我都会收到403错误。错误是：

Object {readyState: 4, getResponseHeader: function, getAllResponseHeaders: function, 

setRequestHeader: function, overrideMimeType: function…}
abort: function (a){var b=a||u;return c&&c.abort(b),x(0,b),this}
always: function (){return e.done(arguments).fail(arguments),this}
complete: function (){if(h){var c=h.length;!function g(b){n.each(b,function(b,c){var d=n.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&g(c)})}(arguments),d?f=h.length:b&&(e=c,j(b))}return this}
done: function (){if(h){var c=h.length;!function g(b){n.each(b,function(b,c){var d=n.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&g(c)})}(arguments),d?f=h.length:b&&(e=c,j(b))}return this}
error: function (){if(h){var c=h.length;!function g(b){n.each(b,function(b,c){var d=n.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&g(c)})}(arguments),d?f=h.length:b&&(e=c,j(b))}return this}
fail: function (){if(h){var c=h.length;!function g(b){n.each(b,function(b,c){var d=n.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&g(c)})}(arguments),d?f=h.length:b&&(e=c,j(b))}return this}
getAllResponseHeaders: function (){return 2===t?e:null}
getResponseHeader: function (a){var b;if(2===t){if(!f){f={};while(b=ic.exec(e))f[b[1].toLowerCase()]=b[2]}b=f[a.toLowerCase()]}return null==b?null:b}
overrideMimeType: function (a){return t||(k.mimeType=a),this}
pipe: function (){var a=arguments;return n.Deferred(function(c){n.each(b,function(b,f){var g=n.isFunction(a[b])&&a[b];e[f[1]](function(){var a=g&&g.apply(this,arguments);a&&n.isFunction(a.promise)?a.promise().done(c.resolve).fail(c.reject).progress(c.notify):c[f[0]+"With"](this===d?c.promise():this,g?[a]:arguments)})}),a=null}).promise()}
progress: function (){if(h){var c=h.length;!function g(b){n.each(b,function(b,c){var d=n.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&g(c)})}(arguments),d?f=h.length:b&&(e=c,j(b))}return this}
promise: function (a){return null!=a?n.extend(a,d):d}
readyState: 4
responseText: "↵<!DOCTYPE html>↵<html lang="en">↵<head>↵  <meta http-equiv="content-type" content="text/html; charset=utf-8">↵  <meta name="robots" content="NONE,NOARCHIVE">↵  <title>403 Forbidden</title>↵  <style type="text/css">↵    html * { padding:0; margin:0; }↵    body * { padding:10px 20px; }↵    body * * { padding:0; }↵    body { font:small sans-serif; background:#eee; }↵    body>div { border-bottom:1px solid #ddd; }↵    h1 { font-weight:normal; margin-bottom:.4em; }↵    h1 span { font-size:60%; color:#666; font-weight:normal; }↵    #info { background:#f6f6f6; }↵    #info ul { margin: 0.5em 4em; }↵    #info p, #summary p { padding-top:10px; }↵    #summary { background: #ffc; }↵    #explanation { background:#eee; border-bottom: 0px none; }↵  </style>↵</head>↵<body>↵<div id="summary">↵  <h1>Forbidden <span>(403)</span></h1>↵  <p>CSRF verification failed. Request aborted.</p>↵↵↵  <p>You are seeing this message because this site requires a CSRF cookie when submitting forms. This cookie is required for security reasons, to ensure that your browser is not being hijacked by third parties.</p>↵  <p>If you have configured your browser to disable cookies, please re-enable them, at least for this site, or for &#39;same-origin&#39; requests.</p>↵↵</div>↵↵<div id="explanation">↵  <p><small>More information is available with DEBUG=True.</small></p>↵</div>↵↵</body>↵</html>↵"
setRequestHeader: function (a,b){var c=a.toLowerCase();return t||(a=s[c]=s[c]||a,r[a]=b),this}
state: function (){return c}
status: 403
statusCode: function (a){var b;if(a)if(2>t)for(b in a)q[b]=[q[b],a[b]];else v.always(a[v.status]);return this}
statusText: "FORBIDDEN"
success: function (){if(h){var c=h.length;!function g(b){n.each(b,function(b,c){var d=n.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&g(c)})}(arguments),d?f=h.length:b&&(e=c,j(b))}return this}
then: function (){var a=arguments;return n.Deferred(function(c){n.each(b,function(b,f){var g=n.isFunction(a[b])&&a[b];e[f[1]](function(){var a=g&&g.apply(this,arguments);a&&n.isFunction(a.promise)?a.promise().done(c.resolve).fail(c.reject).progress(c.notify):c[f[0]+"With"](this===d?c.promise():this,g?[a]:arguments)})}),a=null}).promise()}
__proto__: Object

这里有什么简单的东西吗？

非常感谢您花时间阅读所有内容！

Answer 1

我遇到了同样的问题。设置标题适用于firefox，但不适用于chrome。我做了什么：

var fd = {};
fd['csrfmiddlewaretoken'] = $.csrf_token;

fd是我通过AJAX发送的表单数据。 $.csrf_token是全局对象，我将其打印令牌定义为模板。

之后（标题+表单数据）一切正常。注意：我在几种情况下有另一种方法，我将模拟我发送的数据当作表格。

var fd = new FormData();
fd.append('csrfmiddlewaretoken', $.csrf_token);

你也可以尝试一下。（在这种情况下，您应该将processData: false, contentType: false,添加到AJAX请求设置。）

还有一件事：我认为你应该使用jquery.cookie插件而不是定义自己的函数。

Answer 2

虽然问题没有解决，但我认为我找到了原因。在我的本地计算机中，打印出csrftoken变量会在控制台中生成一个令牌。但是，在我的实时版本中，无论是浏览器，都不会打印出令牌，而是将其设置为null。代码位于我模板顶部的脚本中：

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;

}

var csrftoken = getCookie('csrftoken');
console.log(csrftoken)

function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});

我会为这个问题设置一个新问题（因为我不知道！）

Django：Ajax调用不能用于chrome。在firefox工作

2 个答案: