Django React Axios

Posted

技术标签:

【中文标题】Django React Axios【英文标题】: 【发布时间】:2018-09-03 18:41:31 【问题描述】:

我正在尝试使用 React 和 Axios 向 Django 服务器发出发布请求。但是,我在服务器端收到了重定向 302。

只是按照这篇文章中的所有建议CSRF with Django, React+Redux using Axios 失败:(

但是,到目前为止,我所做的如下: 坐上默认的 axios CookieName 和 HeaderName(在 javascript 端):

axios.defaults.xsrfHeaderName = "X-CSRFToken";
axios.defaults.xsrfCookieName = "XCSRF-Token";

settings.py 中也有这个:

CSRF_COOKIE_NAME = "XCSRF-Token"

这是发布请求的样子:

axios(
    
        method: 'post',
        url: `/api/$selectedEntryType_entry`,
        data: 
            "test": "test"
        ,
        headers: 
            'X-CSRFToken': document.cookie.split('=')[1],
            'X-Requested-With': 'XMLHttpRequest',
            'Content-Type': 'application/json',
        
    
)

我尝试过的另一件事是从 Django rest api UI 发出 post 请求:

它确实成功了。

当我从 UI 和 JS 发出请求时,请求标头中的唯一区别是: AcceptContent-LengthReferer,我看不出它们怎么会有问题。

请帮忙。

【问题讨论】:

【参考方案1】:

通过更改我发布到的 url (url:'/en/api/endpoint/') 来修复它,因为显然是针对 POST 请求:

您通过 POST 调用了此 URL,但该 URL 不以斜杠结尾并且您设置了 APPEND_SLASH。 Django 在维护 POST 数据时无法重定向到斜杠 URL。将表单更改为指向 127.0.0.1:8000/en/api/endpoint/(注意尾部斜杠),或在 Django 设置中设置 APPEND_SLASH=False

之后我开始收到Forbidden 403,但添加了:

from django.views.decorators.csrf import csrf_protect
from django.utils.decorators import method_decorator

@method_decorator(csrf_protect)
def post(self, request):
    return Response()

并将 JS 中的默认设置更改为:

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

并从settings.py 中删除CSRF_COOKIE_NAME = "XCSRF-Token"

成功了。

希望这对将来的某人有所帮助。

【讨论】:

以上是关于Django React Axios的主要内容,如果未能解决你的问题,请参考以下文章

如何将 React 连接到 Django?

React + Django 的最佳安全实践

React 和 Django 部署

React,Django:用户更改密码后如何管理会话?

Heroku 在通过 Django 部署之前构建 React 应用程序

如何在 React 中访问 Django 会话