csrf 令牌缺少 axios 到 django rest 框架

Question

我試圖發出發布請求並面對錯誤代碼 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 中手動包含令牌，您可以在每個調用中設置 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.設置默認標題

您可以為 axios 設置默認標頭，而不是在每個調用中定義 header。

在您要導入 axios 以進行調用的文件中，將其添加到您的導入下方：

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

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

CSRF_COOKIE_NAME = "XSRF-TOKEN"

檢查這個答案

這是如何手動添加它的示例：

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;