Django React Axios答案

【问题标题】：Django React AxiosDjango 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 发出请求时，请求标头中的唯一区别是： Accept、Content-Length 和 Referer，我看不出它们怎么会有问题。

请帮忙。

【问题讨论】：

标签： django reactjs axios

【解决方案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"。

成功了。

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

【讨论】：