今天學習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代碼
?
?
1 $(document).ajaxSend(function(event, xhr, settings) { 2 function getCookie(name) { 3 var cookieValue = null; 4 if (document.cookie && document.cookie != '') { 5 var cookies = document.cookie.split(';'); 6 for (var i = 0; i < cookies.length; i++) { 7 var cookie = jQuery.trim(cookies[i]); 8 // Does this cookie string begin with the name we want? 9 if (cookie.substring(0, name.length + 1) == (name + '=')) { 10 cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); 11 break; 12 } 13 } 14 } 15 return cookieValue; 16 } 17 function sameOrigin(url) { 18 // url could be relative or scheme relative or absolute 19 var host = document.location.host; // host + port 20 var protocol = document.location.protocol; 21 var sr_origin = '//' + host; 22 var origin = protocol + sr_origin; 23 // Allow absolute or scheme relative URLs to same origin 24 return (url == origin || url.slice(0, origin.length + 1) == origin + '/') || 25 (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') || 26 // or any other URL that isn't scheme relative or absolute i.e relative. 27 !(/^(\/\/|http:|https:).*/.test(url)); 28 } 29 function safeMethod(method) { 30 return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); 31 } 32 33 if (!safeMethod(settings.type) && sameOrigin(settings.url)) { 34 xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken')); 35 } 36 });
?簡單方法
- 首先在你需要發起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代碼要簡潔的多
?
