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

我使用Django Rest作为后端api，每个api调用都需要在头中使用CSRF令牌。在开发人员工具中的“应用程序”选项卡中，我显然有一个“csrftoken”值，我需要在Nuxt应用程序执行的每个后续

POST

请求中提取该值（使用Nuxt/Axios）

我的

settings.py

如下所示：

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

CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
    "http://127.0.0.1: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

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

我已经尝试将

jscookies

与

cookies.get（“csrftoken”）一起使用，它只返回未定义的。cookie设置为

HTTPONLY`，因此无法访问吗

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

例如

我不知道该怎么办

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

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

CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
    "http://127.0.0.1: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

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

但是，我可以在我的Nuxt存储中使用

nuxtServerInit

获取cookie：

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

我可以将

numxtserverinit

中的值存储在Nuxt存储中。但是，每当我注销时，如何确保从浏览器中提取新的csrftoken？上面的

nuxtServerInit

部分仅在我重新加载页面时有效，这并不理想

谢谢你给我的指导