vue+django前後端分離，如何解決csrf傳輸問題

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

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

django渲染後的html代碼

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

如果前端採用vue的模式開發web頁面，就要面臨{% csrf_token %}無法被渲染的問題，因爲vue的前端頁面都是通過js動態渲染生成的，即使你再組件頁面裏添加了{% csrf_token %}標籤，最後也會被編碼到js文件中而不是html文件中，django渲染時只會對html渲染。

解決方法：
django提供了獲取csrf_token值的方法：

#
from django.middleware.csrf import get_token
def foo(request):
		csrf_token = get_token(request)   //此時可以獲取到csrf_token的值

**前端代碼：**前端在POST之前先通過get的方式把csrf_token獲取到

this.$http.post(
		'/index/', 
		formData, {
		//POST之前先通過get的方式把csrf_token獲取到,並賦值給this.csrf
         			headers: { 'Content-Type': 'multipart/form-data', 'X-CSRFToken': this.csrf},
       				}).then(function (res) {
             ....
          }, function (res) {
            ......
          });

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