想要了解更多干货，欢迎大家关注我的微信公众号：iProgram爱编程

setting.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'hh.apps.HhConfig',
    'rest_framework',
    'corsheaders',
]
...
MIDDLEWARE = [
  ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
]

# 跨域增加忽略
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = ()

CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)

CORS_ALLOW_HEADERS = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'X-CSRFToken'
)

views.py

import django
from django.http import JsonResponse
from hh.models import *
# Create your views here.

# 获取csrftoken
def get_csrf_token(request):
    token = django.middleware.csrf.get_token(request)
    return JsonResponse({'token': token})


def getloginvalidate(request):
    if request.method == 'POST':
        username = request.POST.get('username')
        password = request.POST.get('password')
        user_infos = UserInfo.objects.filter(username=username,password=password)
        if user_infos.exists():
            return JsonResponse({'code': 'OK','username':username,'password':password})
        else:
            return JsonResponse({'code': 'NO'})
    if request.method == 'GET':
        return JsonResponse({'code': 'get'})

urls.py

 re_path(r'^get-token/$', views.get_csrf_token),
 re_path(r'^getloginvalidate/$', views.getloginvalidate)

前端

network/request.js

import axois from 'axios'
import store from '@/store'
axois.defaults.withCredentials = true;  // 在发送请求时 ，axios 默认是不带cookies的


export function request(config) {
    const instance = axois.create({
        baseURL: 'http://10.40.4.5:8000',
        timeout: 5000
    })

    instance.interceptors.request.use(config => {
        // 解决django 和 VUE 前后端分离 POST 403 (Forbidden)问题
        if (config.method === 'post') {
            config.headers['X-CSRFToken'] = store.state.csrftoken;
        }
        return config
    }, err => {
        return err
    })

    instance.interceptors.response.use(res => {
        return res
    }, err => {
        return err
    })

    return instance(config)
}

network/login.js

import {request} from './request';

export function getloginvalidate(username,password) {
    let params = new URLSearchParams();
    params.append('username',username);
    params.append('password',password);
    return request({
        url: '/getloginvalidate/',
        method:'POST',
        data:params
    })
}

export function getCSRFtoken() {
    return request({
        url: '/get-token/',
        method: 'get'
    })
}

提交post请求的组件

<script>
import {getloginvalidate, getCSRFtoken} from '@/network/login'

export default {
  ...
  created() {
              this.getCSRFtoken()
          },
   methods: {
              login() {
                  if (this.username.length == 0 && this.password.length == 0) {
                      this.$alert('用户名和密码不能为空', '提示', {
                          confirmButtonText: '确定',
                      });
                  } else {
                      getloginvalidate(this.username, this.password).then(res => {
                          console.log(res)
                          this.getCSRFtoken()
                          if (res.data.code == 'OK'){
                            // 跳转到详情页
                              this.$router.replace('/about')
                              this.$store.commit('setLogin')
                          }
                      })
                  }
              },
              getCSRFtoken() {
                  getCSRFtoken().then(res => {
                      this.$store.commit('setToken', res.data.token)
                  })
              }
          },
}     
</script>