解决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 这样就可以了。