Django+vue开发发送POST请求遇到 CSRF验证失败. 请求被中断.

问题描述

禁止访问 (403)
CSRF验证失败. 请求被中断.
Reason given for failure:
    CSRF token missing or incorrect.

先看所使用的组件

• 在本次遇到的问题中，主要使用了 el-input 和 el-select两种组件
• 先看源代码

{% load staticfiles %}


    
    

    
    
    
    
    

    {#    #}



    

    
    
    

    立即创建

• 在这个文件中使用了根据不同的组件类型，使用了两种不同的方式进行CSRF的验证

问题解决

1. 针对el-select这种组标签，采用了 {% csrf_token %}的 方式
2. 对于el-input 这种单标签，采用了getCookie的方式

getCookie(name) {
                var value = '; ' + document.cookie;
                var parts = value.split('; ' + name + '=');
                if (parts.length === 2) return parts.pop().split(';').shift()
            },
 //添加headers 用于解决CSRF Failed: CSRF token missing or incorrect问题
 axios.post('/monitor/AddDevice/', that.device, {headers: {'X-CSRFToken': this.getCookie('csrftoken')}})

验证

• 请求可以正常发送，服务端正常响应

  
  
  image.png

遇到类似问题的小伙伴可以一起交流一下呀