解决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