導入JS時出現Django 403錯誤（Ajax）

Question

當我在我的HTML文件的頂部有我的javascript時，它運行完美。 但是，我想通過將javascript放在static / js文件夾中來清理我的代碼，但是當我移動我的javascript並導入它（我知道我從正確的位置導入）時，我在嘗試時遇到403錯誤使用任何ajax調用。

這種方式有效：

<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<script>
----------my javascript here--------------
</script>

這樣給了我一個403：

<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<script type="text/javascript" src="/static/js/calc.js">

這是給出錯誤的ajax調用：

$.ajax({ 
        url : "/ajax_ad/",
        type : "POST",
        dataType : "json",
        data : {
          'csrfmiddlewaretoken': '{{csrf_token}}',
          'my_pk' : adValue,
        },
          success : function(json) { 
            myResults.innerHTML = "<p>"+json.make + "</p>
          },
          error : function(xhr,errmsg,err) {
            alert(xhr.status + ": " + xhr.responseText); 
          }
        });
        return false;
});

有任何想法嗎？

Answer 1

這是因為當你將javascript放入它自己的文件中時，你只是在沒有上下文數據的情況下提供它，而你的javascript里面有{{ csrf_token }} 。

您獲得的403是權限被拒絕。 無論何時進行沒有csrf_token的POST，都會拋出它。

Django中有圍繞如何使用Ajax處理這一些好的文檔在這里 。

這是來自文檔的復制代碼。

// using jQuery
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)) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});

你會想把它扔進它自己的文件中，並在發布到你的網絡應用程序的其他javascript文件之前加載它。

Answer 2

schillingt的答案給出了正確的理由：您的Javascript文件是靜態的，並且不由模板處理器處理。

這是我使用的另一種選擇：在我的HTML模板中，在表單之外。 我把CSRF令牌： {% csrf_token %} 。

這會在HTML文件中<input type='hidden' name='csrfmiddlewaretoken' value='[csrf token will be here]' /> ： <input type='hidden' name='csrfmiddlewaretoken' value='[csrf token will be here]' />

在我的Javascript中（因為你使用的是jQuery）：

.ajax({ 
    url : "/ajax_ad/",
    type : "POST",
    dataType : "json",
    data : {
      'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val(),
      'my_pk' : adValue,
    },
      success : function(json) { 
        myResults.innerHTML = "<p>"+json.make + "</p>
      },
      error : function(xhr,errmsg,err) {
        alert(xhr.status + ": " + xhr.responseText); 
      }
    });
    return false;
});

或者，如果您實際上並不關心CSRF保護，則可以在視圖上使用@csrf_exempt裝飾器。 你需要這個導入： from django.views.decorators.csrf import csrf_exempt 。