解決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',                    
         'corsheaders'                                                    #剛才安裝的django-cors-headers包所引入的app
         ]
         

      2. 配置參數
         在配置文件中加入以下內容，可根據自己的情況作調整

         	DEBUG = True                                                           #開啟debug模式，注意上線運營時要關閉debug
         	ALLOWED_HOSTS = ['*']                                                    # 允許所有ip訪問
         	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
   

這樣就可以了（或者是在settings文件中將csrf的中間件給注釋掉也行）。

本文前半部分參考：django+vue打造前后端分離的項目時，跨域問題的解決！
如需轉載，請注明出處：https://www.cnblogs.com/zhuchenglin/p/9732245.html