Vue+Django前后端请求时出现CSRF缺失错误

Vue+Django前后端请求时出现CSRF缺失错误

问题再现

最近在做一个项目，选定的是前后端分离开发，后端使用python的Django框架，前端使用Vue.js。在一开始的时候对后端进行编写时，虽然依照RESTFUL规范进行开发的，但是在代码的规范性和美观性上有缺失，所有最近又将其更新为基于类的视图。

export function workdayUpdate(data, token, date) {
  return request({
    url: '/manage/workday/',
    method: 'put',
    params: { token, date },
    data
  })
}

CSRF Failed: CSRF token missing or incorrect

在前后端进行请求的时候出现了csrf缺失的情况，这是django的跨域访问问题，django会对合法的跨域访问做这样的检验，cookies里面存储的csrftoken和POST等headers里面的字段X-CSRFToken作比较，只有两者匹配，才能通过跨域检验，否则会返回一个错误

CSRF Failed: CSRF token missing or incorrect

解决方法

一个由前端解决的方案是在POST等请求的headers里添加一个字段X-CSRFToken，这个字段和cookies里面的csrftoken一样即可

代码如下

export function workdayUpdate(data, token, date) {
  return request({
    url: '/manage/workday/',
    method: 'put',
    params: { token, date },
    headers: {
      'X-CSRFToken': Cookies.get('csrftoken')
    },
    data
  })
}

最后结果

代码如下

export function workdayUpdate(data, token, date) {
  return request({
    url: '/manage/workday/',
    method: 'put',
    params: { token, date },
    headers: {
      'X-CSRFToken': Cookies.get('csrftoken')
    },
    data
  })
}