解決Django+Vue前後端分離的跨域問題及關閉csrf驗證

  前後端分離難免要接觸到跨域問題，跨域的相關知識請參：跨域問題，解決之道

  在Django和Vue前後端分離的時候也會遇到跨域的問題，因爲剛剛接觸Django還不太瞭解，今天花了好長的時間，查閱了好多資料現在解決了這個問題，記錄一下。

1. Django配置
   1. 首先在Django框架裏面要安裝django-cors-headers包,在項目根目錄下執行 pip install django-cors-headers
   2. 配置settings.py
      1. 引入剛剛安裝的包 INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', #剛纔安裝的django-cors-headers包所引入的app 'corsheaders' ]
      2. 配置參數 在配置文件中加入以下內容，可根據自己的情況作調整 #開啓debug模式，注意上線運營時要關閉debug DEBUG = True # 允許所有ip訪問 ALLOWED_HOSTS = ['*'] CORS_ALLOW_CREDENTIALS = True CORS_ORIGIN_ALLOW_ALL = True #允許所有的請求頭 CORS_ALLOW_HEADERS = ('*')
      3. 配置中間件 MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'corsheaders.middleware.CorsMiddleware', #注意順序，必須放在這兒 'django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', #最後一個也必須放在這兒 ]
2. Vue配置 一般情況下Vue中往後端請求的話都是通過axios
   1. 安裝axios npm install axios
   2. Vue的main.js配置axios //配置請求頭，非常重要，有了這個纔可以正常使用POST等請求後臺數據 axios.defaults.headers.post['Content-Type'] = 'application/x-www-fromurlencodeed'

到此爲止，關於Django+Vue前後端分離的跨域問題就解決了，但是後來發現，還是無法請求到數據，因爲Django有csrf驗證，我們可以通過某種方式將其給關掉，下面就簡單來了解一下：

1. 在接收前端請求的文件中（我這邊是view.py）中引入 from django.views.decorators.csrf import csrf_exempt
2. 然後在每個不需要csrf驗證的方法上方加上 @csrf_exempt 這樣就可以了。