gpt4 book ai didi

python - Django React axios 发布请求 : how to get csrftoken cookie?

转载 作者:行者123 更新时间:2023-12-05 07:33:35 25 4
gpt4 key购买 nike

我使用 Django rest 框架作为我的后端 (api),并使用 React 作为前端。

现在我想将表单数据 POST 到后端。我想用csrf保护,因为安全。因此,我尝试使用 Django 发送的 csrftoken cookie 为我的 axios 请求手动设置 csrf header 。

For this I am using the method as recommended in the Django documentation: Link

我遇到的问题是我需要在我的机器上有 cookie,然后才能将它添加到 header ,而且我不知道如何让 Django 返回 cookie。

主要问题:如何在我的机器上获取 csrftoken cookie? (虽然 React 正在呈现表单,但(最初)不需要与 Django 后端进行任何通信)

此外,如果您发现我的代码有任何问题,我很想知道。

我的代码

这是我当前的代码,我将描述我尝试过的事情:

django views.py:

from django.views.decorators.csrf import ensure_csrf_cookie


@ensure_csrf_cookie
def contact(request):
if request.method == "POST":
print(request.data)
if request.method == "GET":
return request

最初,我只有上述功能的 POST 部分。但是由于我似乎没有 Django 发送给我的 csrftoken cookie,我尝试使用 GET 向 View 添加功能以获取该 cookie。 (我也试过返回一个 HttpResponse(""),但没有效果)。

我怎么知道我没有 cookie?我正在使用 Chrome,转到设置 > 高级 > 内容设置 > cookies > 查看所有 cookies 和网站数据

这里我检查“127.0.0.1”,因为 React 运行在“127.0.0.1:3000”(Django 运行在“127.0.0.1:8000”)。

最初,我确实看到了一个名为“csrftoken”的 cookie,看起来正是我需要的。即使我的代码不起作用,我也无法将数据 POST 到后端。然后我删除了该 cookie,此后我无法将其取回。

稍后添加:我还检查了是否使用 Chrome 开发工具(在应用程序 > cookie 下)看到了 cookie。

我的 axios 请求:

var axios = require('axios')
var jQuery = require('jquery')


module.exports = {
...
submitForm: function(bodyFormData) {
console.log("api.submitForm executes")
axios({
method: 'post',
url: 'http://127.0.0.1:8000/customer/contact/',
data: bodyFormData,
config: { headers: {'Content-Type': 'multipart/form-data' }},
headers: {"X-CSRFToken": this.getCookieValue('csrftoken')}
})
.then(function(response) {
console.log('response success, response + data:')
console.log(response)
console.log(response.data)
return response.data
})
.catch(function(response) {
console.log('response error, response + data:')
console.log(response)
console.log(response.data)
})
},

getCookieValue: function(name) {
this.getCSRFCookie()
let cookieValue = null
if (document.cookie && document.cookie !== '') {
let cookies = document.cookie.split(";")
for (let i = 0; i < cookies.length; i++) {
let cookie = jQuery.trim(cookies[i])
if (cookie.substring(name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1))
break
}
}
}
console.log("cookieValue: " + cookieValue)
return cookieValue
},

getCSRFCookie: function() {
console.log("getCSRFCookie")
axios.get('http://127.0.0.1:8000/customer/contact/')
}
}

在查看上面的代码时,我发现即使发送了 cookie,也可能会出现问题。我可以想象获取cookie的请求还没有完成,而正在执行向后端发送表单数据的POST请求。

也许我可以通过在加载表单时而不是在发送表单时执行获取 cookie 的请求来解决这个问题。但我现在主要关心的是首先访问 cookie。

提前致谢!

最佳答案

npm 包 django-react-csrftoken 可能对您有帮助。将其用作表单中的组件。

import React from 'react';
import DjangoCSRFToken from 'django-react-csrftoken'

class MyLoginForm extends React.Component {
render(){
return (
<div className="container">
<form>
<DjangoCSRFToken/>
// xyz
// submit button
</form>
</div>
)
}
}

ensure_csrf_cookie 修饰相应的 django View ,如前所述 here .

关于python - Django React axios 发布请求 : how to get csrftoken cookie?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50544051/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com