Django+Vue项目学习第五篇：vue+django发送post请求，解决csrf认证问题

<script>
import axios from 'axios'
import Qs from 'qs'

export default {
  name: "main_page",
  data() {
    return {
      num1: null,
      num2: null,
      info: null,
    }
  },

  methods: {

    create_data(event) {
      if (event.target.id === "b01") {  //通过event.target.id，获取浏览器监听到的点击事件，并查看点击元素的id，通过比对id值判断触发哪个请求
        axios({
          url: "http://localhost:8000/create_data/phone"  //如果不指定method，默认发送get请求
        }).then(res => {
          this.info = res.data
          console.log(res)

        })
      } else if (event.target.id === "b02") {
        console.log('输入的num1='+this.num1)
        let payload1 = {
          num: this.num1,
        }
        axios({
          method: "post",
          headers: {
            'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8',
          },
          data: Qs.stringify(payload1),  //发送post请求，使用data关键字接收请求参数
          url: "http://localhost:8000/create_data/id"
        }).then(res => {
          this.info = res.data
          console.log(res)
        })
      } else if (event.target.id === "b03") {
        let payload = {
          num: this.num2
        }
        console.log(payload)
        axios({
          method: "get",
          params: payload,  //发送get请求，使用params关键字接收请求参数
          url: "http://localhost:8000/create_data/name"
        }).then(res => {
          this.info = res.data
          console.log(res)
        })
      }
    },
  },

}
</script>

method，指明了请求方法为 post；
headers，添加请求头，请求头中加了一个 Content-Type，为 application/x-www-form-urlencoded; charset=UTF-8；
data，添加携带的参数，这里对参数做了一个处理，使用 Qs.stringify(payload1)对payload进行了序列化处理（如果是application/x-www-form-urlencoded格式的数据，必须要做这个处理，不然django会获取不到请求body中的参数）

def create_id(num):
    """生成身份证"""
    identity_ids = [fake.ssn() for i in range(int(num))]

    return " ".join(identity_ids)

@require_http_methods(['GET', 'POST'])
def id(request):

    num = request.POST.get("num")  # "Content-type","application/x-www-form-urlencoded"
    print(num)
    if num == "" or num is None:
        data1 = create_id(5)
    else:
        data1 = create_id(num)
    return HttpResponse(data1)

CORS_ALLOW_CREDENTIALS = True  # 允许携带cookie

MIDDLEWARE = [

    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',  # 注释这一行可以去掉csrf验证
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

from django.middleware.csrf import get_token

def get_csrf_token(request):
    csrf_token = get_token(request)  # 获取csrf_token的值
return JsonResponse({'token': csrf_token})

create_data/urls.py

from django.urls import path

from . import views

urlpatterns = [
    path('', views.main, name='main'),
    path('phone', views.phone, name='phone'),
    path('id', views.id,name='id'),
    path('name', views.name,name='name'),
    path('get_csrf_token', views.get_csrf_token,name='get_csrf_token'),
]

axios.defaults.withCredentials = true  #允许跨域携带cookie信息，必须加上

methods: {
    token() {
      axios.get("http://localhost:8000/create_data/get_csrf_token").then(res => {
        let token = res.data.token
        console.log("**********"+token);
        sessionStorage.setItem("csrf_token", token) //有些博主说把生成的token放到缓存中，然后发请求时拿这个缓存放到请求头中，我试了下这个其实并没有用，可以注释掉，因为我们不拿这个token

      })

    },

    create_data(event) {
　　　　......
　　　　......
　　　　......
}

methods: {

    create_data(event) {
      this.token()  //调用create_data()函数时，先调用token()函数，请求后台生成csrftoken
      // console.log("..............."+this.token());
      // console.log(typeof event.target.id)
      console.log('cookie='+document.cookie)  //打印浏览器cookie
      let cookie = document.cookie  //提取cookie
      let csrf_token = cookie.split("=")[1]  //提取cookie中的csrftoken
      console.log('cookie_csrf_token='+cookie.split("=")[1])

      if (event.target.id === "b01") {
        ......
        ......
      } else if (event.target.id === "b02") {
        console.log('输入的num1='+this.num1)
        let payload1 = {
          num: this.num1,
        }
        axios({
          method: "post",
          headers: {
            'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8',
            'X-CSRFToken': csrf_token,
          },
          data: Qs.stringify(payload1),  //application/x-www-form-urlencoded,发送post请求，使用data关键字接收请求参数
          url: "http://localhost:8000/create_data/id"
        }).then(res => {
          this.info = res.data
          console.log(res)
        })
      } else if (event.target.id === "b03") {
        ......
        ......
      }
    }
  }

this.token()

let cookie = document.cookie  // 通过document.cookie提取cookie
let csrf_token = cookie.split("=")[1]  //提取cookie中的csrftoken

'X-CSRFToken': csrf_token

axios({
          withCredentials: true,
          method: "post",
          headers: {
           ......

      }