django自帶的csrf驗證功能
使用django時疆拘，django框架都會自帶csrf的驗證功能，根據(jù)django的使用文檔一般是在前端頁面的form表單里添加{% csrf_token %}標簽箫措，當瀏覽器加載該頁面時腹备，django會解析模板頁面，渲染{% csrf_token %}為一個input標簽斤蔓，如下圖所示:
html頁面代碼
<form>
{% csrf_token %}
.....
</form>
django渲染后的html代碼
在這里插入圖片描述
經過上面的分析植酥，我們可以清晰的了解到，原生django在使用過程中，csrf會自動通過表單提交將token值傳輸?shù)胶笈_友驮。
問題
如果前端采用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值攜帶上低淡。
- django提供了獲取csrf_token值的方法，在django中創(chuàng)建一個獲取csrf_token的視圖函數(shù)：
#
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})
- 前端在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等配置項妥衣。
