我正在尝试发送我生成的csrf令牌
下面是csrftoken生成
const [cr , setCR] = useState('')
const getcsrf = async () => {
await fetch('http://localhost:8000/auth/gettoken')
.then( async res => await res.json()).then(data =>{
setCR( data.crsftoken)
console.log(cr)
})
}
useEffect( () => {
getcsrf()
},[] )字符串
在我获得令牌后，我尝试使用fetch发送它
const handlelogin = async () => {
if(cr !== ''){
console.log(cr)
await fetch('http://localhost:8000/auth/login',
{method : "POST",
credentials: "include" ,
headers: {
"Content-Type": "application/json",
"X-CSRFToken" : cr
},
body : {
"username" : username,
"password" : password
}
}
).catch(err => console.log(err))}else{console.log('cr is null')}
}型
这csrf令牌是生成我可以看到它当我console.logged它但fetch带回一个403禁止错误
Forbidden (CSRF token from the 'X-Csrftoken' HTTP header incorrect.): /auth/login[09/Nov/2023 05:49:59] "POST /auth/login HTTP/1.1" 403 2553的字符串
我期待它发布到我给它的URL。它有什么问题？
2条答案
按热度按时间0aydgbwb1#
CSRF Middleware令牌是随每个请求自动生成的，因此您发送的值有可能与后续请求不匹配，因为中间有一个GET请求。
如果你想做CSRF，最好是手动管理它，而不是通过CSRF中间件，也许Django Rest框架有一个解决方案。
CSRF很简单。
1.您向客户端发送一个值，并将相同的值保存到会话中。
1.当你收到请求时，你检查接收到的值和保存的值。如果它们匹配，处理请求，否则返回一个错误。
wixjitnu2#
在Django模板中，在表单中包含{% csrf_token %}。在React组件中添加CSRF token：例如const csrfToken = document.getElementsByName（“csrfmiddlewaretoken”）[0].value;
字符串
配置Django接受头部的CSRF token：例如在settings.py文件中，你有token（CSRF_HEADER_NAME = 'HTTP_X_CSRFTOKEN'）。注意->确保Django视图允许来自React前端的POST请求。