Django：Ajax调用不在chrome中工作。在Firefox中工作

Question

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

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

在我的本地机器中我在控制台中获取令牌。在我的真人版上，toke是空的。我会为此提出一个新问题，因为实际问题已经发生了很大变化。编辑：在朋友的建议下，我已经把输入和按钮放到一个带有{$ csrf_token％}标签的表单中。我也将'csrfmiddlewaretoken'传回ajax文章。这不再适用于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

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

Django的查看

@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") 

这真的是我所要做的一切。我应该说，我ahve添加所需的代码（如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变量会在控制台中产生一个令牌。但是，在我的实时版本中，无论浏览器如何，标记都不会被打印出来，而是被设置为空。该代码是一个脚本在我的模板的顶部：

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

我会成立了为什么会发生一个新的问题

（因为我不知道！）