django自帶的csrf驗證功能

使用django時，django框架都會自帶csrf的驗證功能，根據django的使用文檔一般是在前端頁面的form表單里添加{% csrf_token %}標簽，當瀏覽器加載該頁面時，django會解析模板頁面，渲染{% csrf_token %}為一個input標簽，如下圖所示:
html頁面代碼

<form>
    {%   csrf_token %}
    .....
</form>

django渲染后的html代碼

在這里插入圖片描述

經過上面的分析，我們可以清晰的了解到，原生django在使用過程中，csrf會自動通過表單提交將token值傳輸到后臺。

問題

如果前端采用vue的模式開發(fā)web頁面，就要面臨{% csrf_token %}無法被渲染的問題，因為vue的前端頁面都是通過js動態(tài)渲染生成的，即使你在組件頁面里添加了{% csrf_token %}標簽，最后也會被編碼到js文件中而不是html文件中，django渲染時只會對html渲染。這就會導致在使用axios做前端異步請求時，除了get之外的請求方法django都會返回403狀態(tài)碼，表單總是提交不上去。

解決方法(兩種)：

方法一：

先通過get方法獲取csrf_token的值，然后緩存起來。之后每次發(fā)起post異步請求時，將獲取到的csrf_token值攜帶上。

1. django提供了獲取csrf_token值的方法，在django中創(chuàng)建一個獲取csrf_token的視圖函數：

#
from django.middleware.csrf import get_token
def get_csrf_token(request):
    print(request)
    csrf_token = get_token(request)  # 獲取csrf_token的值
    print(csrf_token)
    return json_response(data={'token': csrf_token})

2. 前端在POST請求之前先通過get的方式把csrf_token獲取到，并緩存起來

import axios from 'axios'
// 獲取csrf_token
axios.get('/api/home/token/').then(res => {
 let csrf_token = res.data.data.token
 window.sessionStorage.setItem("csrf_token", csrf_token)
})

// post請求，配置請求頭
 axios({
  url: '/api/auth/login/',
  method: 'post',
  data: {
    username: this.username,
    password: this.password
  },
  headers: {
    'Content-Type':'application/x-www-form-urlencoded',
    'X-CSRFToken': window.sessionStorage.getItem("csrf_token")
  }
})

上述這種方式相當于手動將csrf值獲取到然后在重新傳給后臺驗證，而原生的django其實是幫你做了處理。

方法二：

前端設置axios請求攔截器，用于獲取cookie中csrftoken的值，然后在請求頭中添加X-CSRFToken等配置項。

請參考： axios請求攔截器&響應攔截器 介紹(其中有解決csrf問題的方案)