在前端使用 React 时从 Django 获取 CSRF 会话 cookie

编程问答 2022-05-14

问题描述

背景

我一直在尝试从 React 前端向应用程序的后端（用 Django 编写）发出 POST 请求，但请求失败，因为该请求不包含 CSRF 令牌。这是我用来设置和发送请求的代码：

    const formData = new FormData()

    // 'image' is a user uploaded image
    formData.append(
        "myImage",image,image.name
    )

    const data = await axios.post("http://localhost:8000/myendpoint",formData)
    return data

我的应用程序非常简单，因为没有我需要做的登录/会话保持，并且要使用该应用程序，用户只需要向我的 Django API 提供一些数据（准确地上传图像）端点，然后得到一些结果。作为参考，这是我在 Django 服务器日志中看到的内容：

禁止（未设置 CSRF cookie。）：/myendpoint

这是我在浏览器控制台中看到的错误：

POST http://localhost:8000/myendpoint 403（禁止）

基于一些与我的问题类似的问题，建议似乎是从 Django 发送的 csrftoken cookie 中检索此 CSRF 令牌，然后将其包含在后续的 POST 请求中（例如，{{3} } 回答）。我不认为这会起作用，因为我在 localhost:3000 时没有在浏览器的开发窗口中看到任何 cookie，但我无论如何都尝试并看到 cookie 未定义：

CSRF 代币：未定义

我使用此代码尝试获取 cookie（使用 this 库）：

    var csrftoken = Cookies.get('csrftoken');
    console.log(`CSRF Token: ${csrftoken}`)

问题

如果这是我发送的唯一请求，有没有办法在发送 POST 请求之前从 Django 获取 CSRF 令牌 cookie？我知道一些“hacky”方法，例如为我的端点使用 csrf_exempt 装饰器，但我想知道是否有办法让它在没有它的情况下工作？

谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

djangodjango-csrfdjango-viewsreactjsreactjs