如何解決Django中ajax發送post請求報403錯誤CSRF驗證失敗的問題

這篇文章主要介紹了如何解決Django中ajax發送post請求報403錯誤CSRF驗證失敗的問題，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

今天學習Django框架，用ajax向后臺發送post請求，直接報了403錯誤，說CSRF驗證失敗；先前用模板的話都是在里面加一個 {% csrf_token %} 就直接搞定了CSRF的問題了；很顯然，用ajax發送post請求這樣就白搭了；

文末已經更新更簡單的方法，上面的略顯麻煩

上網上查了一下，看了幾個別人的博客，才知道官網也早有說明解決辦法，大致流程就是：

就是新建一個JavaScript文件，然后把網上給的代碼粘貼進去，然后在你使用ajax的頁面把它引入一下；當然，如果你在網上找到的解決代碼包含JQuery的話，那就需要在引入的JQuery之后引入了（畢竟解決代碼不唯一，網上一找一堆，基本都是對的，原生JS和帶JQuery的都有）；

文末會附上我使用的JS相關代碼，也可以去網上找！

如果上述沒有解決你的問題，那就說明你和我踩了同樣的一個小坑........

用了上面查到的方法，直接就解決了我的問題，但是隨著我對代碼修修改改、清除了相關頁面的cookie，吃個飯再運行，竟然又報403的CSRF錯誤了；百思不得其解的我又去Django官網看了一下相關部分的文檔，一堆英文看看大概找到了問題；

我發現我把html頁面里面原先加的 {% csrf_token %} 這個東西給刪掉了，加上谷歌的相關頁面cookie被我一清除，csrftoken就被咔嚓了，再刷新頁面，去html頁面里也找不到 {% csrf_token %} ，沒有了csrftoken那個cookie值，即使有相關的JS代碼也毛用沒有了；

打個比方：

• 你吃飯需要工具，也就是筷子，但是飯都沒有，你拿個筷子吃什么呀！！！

• 這里的筷子就是解決問題的JS代碼，而飯就是這個 {% csrf_token %} ，更確切說因該是瀏覽器中的叫 csrftoken 的 cookie；

• 兩者都有了，才能徹底解決吃飯的問題；

總結下來：

• 使用ajax發送post請求時，html頁面里一定要有 {% csrf_token %}，在body里應該就沒什么大問題；

• 然后引入相關的JS解決代碼；

• 補充一下，和表單沒什么太大關系，因為我的html頁面里就沒有表單，直接通過點擊按鈕發送的ajax請求；

需要引入的相關JS代碼

$(document).ajaxSend(function(event, xhr, settings) {
  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;
  }
  function sameOrigin(url) {
    // url could be relative or scheme relative or absolute
    var host = document.location.host; // host + port
    var protocol = document.location.protocol;
    var sr_origin = '//' + host;
    var origin = protocol + sr_origin;
    // Allow absolute or scheme relative URLs to same origin
    return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
      (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
      // or any other URL that isn't scheme relative or absolute i.e relative.
      !(/^(\/\/|http:|https:).*/.test(url));
  }
  function safeMethod(method) {
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
  }
 
  if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
    xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
  }
});

簡單方法

• 首先在你需要發起ajax post請求的頁面的里面隨便一個地方加上 {% crsr_token %}

• 然后瀏覽器里查看源碼，會有這么一個隱藏標簽：<input type="hidden" name="csrfmiddlewaretoken" value="jlYb5LCP21TxGapw7OuO0xbHmRnyFzlgDapiDl1M1Vp6dOjPM4BlHOgOVeuPYQ27">

• 在發起ajax post 請求時，組織json參數時，以下面這種方式使其成為參數，前兩個參數是我自定義的請自行忽略，其中鍵值對中的鍵名為input標簽的name名，值就為其value值

• csrf = $('input[name="csrfmiddlewaretoken"]').val();

• params = {'sku_id': sku_id, 'count': count, 'csrfmiddlewaretoken': csrf};

• 這樣就可以把csrf中的參數傳遞給后端，就不會有403錯誤了，相比前面用了好大一段JS代碼要簡潔的多

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何解決Django中ajax發送post請求報403錯誤CSRF驗證失敗的問題”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!