csrf 令牌缺少 axios 到 django rest 框架

Question

我试图发出 post 请求并遇到错误代码 403，csrf 令牌丢失.. 尝试了很多方法，但最后没有在 settings.py 上禁用 csrf 令牌并工作，所以发现问题出在 csrf 令牌中

class Axios extends React.Component{

constructor(){
    super()
    this.state = {
        persons: []
    }
}



post(){
    axios.post('http://127.0.0.1:8000/api/create', {
        title: 'titan',
        body: 'this is working',
      })
    
      .then(function (response) {
        console.log(response);
    })
}

get(){
    axios.get('http://127.0.0.1:8000/api').then(Response=>{
        console.log(Response.data)
    })
}
componentDidMount(){

    this.post();
    this.get();
    
}



render(){
    return(
        <div>
            <h1>fetch</h1>
        </div>
    )
}
}

export default Axios;

这是我的代码，请告诉我一种将 csrf 令牌放入其中的方法以及导入语句...

目前正在使用 axios 谢谢

Answer 1

共有三种方式。可以手动在每次axios调用的header中包含token，可以在每次调用中设置axios的xsrfHeaderName，也可以设置一个默认的xsrfHeaderName。

1。手动添加

假设您将令牌的值存储在名为csrfToken 的变量中。在你的 axios 调用中设置标题：

// ...
method: 'post',
url: '/api/data',
data: {...},
headers: {"X-CSRFToken": csrfToken},
// ...

2。在调用中设置xsrfHeaderName：

添加这个：

// ...
method: 'post',
url: '/api/data',
data: {...},
xsrfHeaderName: "X-CSRFToken",
// ...

然后在您的settings.py 文件中，添加以下行：

CSRF_COOKIE_NAME = "XSRF-TOKEN"

3。设置默认标题

不用在每次调用中定义header，你可以为axios设置默认headers。

在您要导入 axios 以进行调用的文件中，将以下内容添加到您的导入下方：

axios.defaults.xsrfHeaderName = "X-CSRFToken";

然后在您的settings.py 文件中，添加以下行：

CSRF_COOKIE_NAME = "XSRF-TOKEN"

检查这个answer

这是一个手动添加的示例：

class Axios extends React.Component{    

constructor(){
    super()
    this.state = {
        persons: []
    }
}
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

var CSRF_TOKEN=getCookie('csrftoken');
post(){
    axios.post('http://127.0.0.1:8000/api/create', {
        title: 'titan',
        body: 'this is working',
    headers:{
                    'X-CSRFToken':CSRF_TOKEN,
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
          })
        
      .then(function (response) {
        console.log(response);
    })
}

get(){
    axios.get('http://127.0.0.1:8000/api').then(Response=>{
        console.log(Response.data)
    })
}
componentDidMount(){

    this.post();
    this.get();
    
}    
render(){
    return(
        <div>
            <h1>fetch</h1>
        </div>
    )
}
}
export default Axios;