如何在后端使用 Nuxt 和 Django 在我的 axios 请求中发送 CSRFToken？

问题描述

我使用 Django Rest 作为后端 API，并且每个 API 调用都需要在标头中包含一个 CSRF 令牌。在开发人员工具的“应用程序”选项卡中，我显然有一个“csrftoken”值，我需要在每个后续 POST 请求中提取该值，我的 Nuxt 应用程序执行（使用 Nuxt/Axios）

我的 settings.py 看起来像这样：

CORS_ORIGIN_WHITELIST = (
    "http://localhost:3000","http://127.0.0.1:3000",)

CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",]
CORS_EXPOSE_HEADERS = ['Content-Type','X-CSrftoken']
CORS_ALLOW_CREDENTIALS = True

CSRF_COOKIE_SAMESITE = "Lax"
SESSION_COOKIE_SAMESITE = "Lax"
CSRF_COOKIE_HTTPONLY = True
SESSION_COOKIE_HTTPONLY = True

我曾尝试将 js-cookies 与 Cookies.get("csrftoken") which just returns undefined. Is the cookie not accessible because it's set to HTTPONLY` 一起使用？

这里推荐的步骤是什么？我应该在我的 django 后端创建一个视图来生成一个 CSRF 令牌，然后在前端发出每个请求之前，我在我的 Django 应用程序中调用这个视图来获取令牌吗？

例如

def get_csrf(request):
    response = JsonResponse({"detail": "CSRF cookie set"})
    response["X-CSrftoken"] = get_token(request)
    return response

不知道如何继续..

我的 Nuxt/Axios 请求如下所示：

const response = 
    await this.$axios.$post("/api/portfolios/",stockData,{ headers: { "X-CSrftoken": /* Need some value here.  */ } 
    });

但是我可以在 Nuxt Store 中使用 nuxtServerInit 获取 cookie：

            async nuxtServerInit({commit}) {
                console.log(this.$cookies.get("csrftoken")) // this works,can store it in some state
            },

我可以将 nuxtServerInit 中的值存储在 Nuxt 存储中。但是，每当我注销时，如何确保从浏览器中提取新的 csrftoken？上面的 nuxtServerInit 部分仅在我重新加载页面时才有效，这并不理想。

感谢我能得到的任何指导。

解决方法

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

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

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