django + vue-admin-template解决CSRF Failed: CSRF token missing or incorrect 问题

最新推荐文章于 2023-06-28 15:14:47 发布

xxs!

最新推荐文章于 2023-06-28 15:14:47 发布

阅读量4.3k

点赞数 1

分类专栏： vue Django 文章标签： django vue.js csrf

本文链接：https://blog.csdn.net/SKY_PLA/article/details/122359299

版权

Django 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

vue

5 篇文章 2 订阅

订阅专栏

背景：vue使用Network进行登录的时候报错 403，但是在localhost的时候就没问题，进行了一下对比，network header中多了一个cookie,local中就没有，再结合django默认有csrf跨站点请求伪造,翻了翻文档，得知需要在header中添加X-CSRFToken，解决办法如下：

解决办法：
在vue-admin-template utils/request.js中加入获取csrftoken的方法
原先的方法是在有token的情况下vue才会在header中加入token，但是登录的时候是没有token状态的，所以添加一下csrftoken就可以了

const getCookie = function(name) {
  var value = '; ' + document.cookie
  var parts = value.split('; ' + name + '=')
  if (parts.length === 2) return parts.pop().split(';').shift()
}
// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent

    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      config.headers['Authorization'] = 'Token ' + getToken()
      config.headers['X-CSRFToken'] = getCookie('csrftoken')
    } else {
      config.headers['X-CSRFToken'] = getCookie('csrftoken')
    }
    return config
  },