- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我使用 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/
我对 Python-Django 和 web 开发还很陌生,我被困在这个使用 POST 创建新资源的特殊问题上。 我正在为 REST API 使用 Django REST 框架,我正在尝试创建一个新资
我已经使用 Django-storages 成功地将 Word 文档存储到 S3。 class Document(TitleSlugDescriptionModel, TimeStampedModel
我有 2 个关于模型代理的问题, 如何从模型对象创建代理对象? 如何从模型查询集创建代理查询集? 例如,假设我们定义了: from django.contrib.auth.models import
我想编写一个直接执行 HTTP 请求的单元测试(而不是使用 django.test.client.Client)。 如果您好奇为什么 - 那是因为我想测试我从 Django 应用程序公开的 Thrif
我为我的个人网站启动了一个 django 项目来学习 django。到目前为止,我已经将我的开发环境设置为我需要的一切,并遵循 this很棒的教程来创建一些基本的数据结构和模板。现在我想开始使用我之前
我已经阅读了很多关于如何在使用 Django 注册时添加额外字段的信息,例如 here 、 here 和 here 。代码片段是: forms.py(来自注册应用程序) class Registrat
我正在编写小型社交应用程序。功能之一是在网站标题中写入用户名。因此,例如,如果我登录并且我的名字是Oleg(用户名),那么我应该看到: Hello, Oleg | Click to edit prof
我有一个使用 Django 和 Django Rest 框架开发的应用程序。我想将 django-reversion 功能添加到我的应用程序中。 我已经尝试过http://django-reversi
我有一个简单的 HTML 表单,我没有使用 Django 表单,但现在我想添加一个选择。 选择最容易创建为 Django ChoiceField (与通过循环等手动创建选择相反),但是,如果没有在 D
我不明白为什么人们以两种方式编写外键,这样做的目的是什么?它们是相同还是不同? 我注意到有些人这样写: author = models.ForeignKey(Author, on_delete=mod
我想在我的 Django 应用程序中获取评论最多的十个帖子,但我做不到,因为我想不出合适的方法。 我目前正在使用 django 评论框架,并且我已经看到使用 aggregate or annotate
这对于 Django 1.2 仍然有效吗? Custom Filter in Django Admin on Django 1.3 or below 我已经尝试过,但管理类中的 list_filter
问题在于,当 django-compressor 编译为 .js 文件的 CoffeeScript 文件中引用 {{ STATIC_URL }} 时,它无法正确加载。 在我的 django 模板中,我
我正在尝试将一些字段从一个 django 模型移动到一个新模型。假设我有一个书籍模型: class Book(models.Model): title = models.CharField(max
我想在我的 Django 应用程序中获取评论最多的十个帖子,但我做不到,因为我想不出合适的方法。 我目前正在使用 django 评论框架,并且我已经看到使用 aggregate or annotate
目前我正在寻找在 Django 中实现访问控制。我已经阅读了有关内置权限的内容,但它并不关心每个对象的基础。例如,我想要“只有创建者可以删除自己的项目”之类的权限。所以我读到了 django-guar
嗨,我正在将我的 Django 模型的一个字段的值设置为其他模型的另一个字段的值。这个值应该是动态变化的。 这是我的第一个模型 class MainModel(AbstractBaseUser, Pe
我正在尝试为我的模型创建一个编辑表单。我没有使用模型表单,因为根据模型类型,用户可以使用不同的表单。 (例如,其中一个表单有 Tinymce 小部件,而另一个没有。) 有没有什么方法可以使用模型设置表
Django 模板中的搜索字段 如何在类似于此图像的 Django 模板中创建搜索字段 http://asciicasts.com/system/photos/1204/original/E354I0
根据 Django documentation ,如果 Django 安装激活了 AuthenticationMiddleware,HttpRequest 对象有一个“user”属性代表当前登录的用户
我是一名优秀的程序员,十分优秀!