努力为Django和React项目存储csrf令牌值 Cookies.get'csrftoken';为空

问题描述

我正在使用Django后端和React前端的Web应用程序。由于我认为这是一个csrf令牌问题，因此我在处理发布，放置和删除请求方面遇到了麻烦。我尝试使用js Cookie库获取令牌。但是，当我将csrf变量登录到控制台时，该值是不确定的。

我尝试创建一个组件以将其嵌入到我的窗体和开始窗体标签中，类似于csrf模板标签： `从'react'导入React； 从“ js-cookie”导入Cookies；

const csrftoken = Cookies.get('csrftoken');
console.log("CSrftoken token: " + csrftoken)

const CSrftoken = () => {
    return (
        <input type="hidden" name="csrfmiddlewaretoken" value={csrftoken} />
    );
};
export default CSrftoken;

我还尝试过在OnFinish方法中处理令牌：

`   onFinish = (values,requestType,articleID) => {
        console.log("Success:",values);
        const title = (values.title);
        const content = (values.content);

        console.log(this.props.requestType);

        const csrftoken = Cookies.get('csrftoken');
        const headers = { "X-CSrftOKEN":  csrftoken  }
        console.log("csrftoken: " + csrftoken);
    

        switch (this.props.requestType) {
            case 'post':
                return axios.post('http://127.0.0.1:8000/api/',{
                    title: title,content: content,headers: headers,xsrfCookieName: 'XSRF-TOKEN',xsrfheaderName: 'X-XSRF-TOKEN',xsrfheaderName: "X-CSrftoken"
                })
                    .then(res => console.log(res))
                    .catch(err => { console.log(err); })

            case 'put':
                return axios.put(`http://127.0.0.1:8000/api/${articleID}/`,xsrfheaderName: 'X-XSRF-TOKEN'
                })
                    .then(res => console.log(res))
                    .catch(err => { console.log(err); })
        }
    };

    onFinishFailed = (errorInfo) => {
        console.log("Failed:",errorInfo);
    };

    render() {
        return (
            <div>
                <Form
                    name="basic"
                    initialValues={{
                        remember: true
                    }}
                    onFinish={this.onFinish}
                    onFinishFailed={this.onFinishFailed}
                >
                    <Form.Item label="Title" id='title' name="title">
                        <Input name="title" placeholder="Enter a Title" />
                    </Form.Item>
                    <Form.Item label="Content" id='content' name="content">
                        <Input name="content" placeholder="Enter the content of the announcement here" />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">{this.props.btnText}</Button>
                    </Form.Item>
                </Form>
            </div>
        );
    }
};

不幸的是，这两次尝试都有相同的结果，并且csrf变量为空。我是应用开发的新手，在阅读了类似的文章和文档后，我仍然在努力解决该问题。任何帮助或指导，我们将不胜感激。谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）