如何在后端使用 Nuxt 和 Django 在我的 axios 请求中发送 CSRFToken?
Posted
技术标签:
【中文标题】如何在后端使用 Nuxt 和 Django 在我的 axios 请求中发送 CSRFToken?【英文标题】:How do I send CSRFToken in my axios requests using Nuxt and Django on the backend? 【发布时间】:2021-04-10 17:08:59 【问题描述】:我使用 Django Rest 作为后端 api,每个 API 调用都需要在标头中包含一个 CSRF Token。在开发人员工具的“应用程序”选项卡中,我显然有一个“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
我尝试过将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 商店中使用 nuxtServerInit
获取 cookie:
async nuxtServerInit(commit)
console.log(this.$cookies.get("csrftoken")) // this works, can store it in some state
,
我可以将来自nuxtServerInit
的值存储在 Nuxt 商店中。但是,每当我注销时,如何确保从浏览器中提取新的 csrftoken?上面的nuxtServerInit
部分仅在我重新加载页面时才有效,这并不理想。
感谢我能得到的任何指导。
【问题讨论】:
【参考方案1】:通过 nuxt 插件使用默认 xsrfHeaderName 和 xsrfCookieName 值设置 axios。 配置后,如果 cookie 中存在,axios 将在请求中包含带有 cookie 值的 csrf 标头。
-
在 nuxt.config.js 中包含您的新插件
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
'~/plugins/axios',
]
-
创建插件/axios.js
可以选择声明为全局默认配置,或用于 nuxt 实例。
// content of plugins/axios.js
/*
// This is a global config declaration that works on any axios instance,
// meaning that if you just import axios from 'axios' in any place, you will get those.
// This will also work on the axios instance that nuxt creates and injects.
import axios from 'axios'
axios.defaults.xsrfHeaderName = 'x-csrftoken'
axios.defaults.xsrfCookieName = 'csrftoken'
*/
export default function ( $axios )
// This is a nuxt specific instance config, this will work in
// everyplace where nuxt inject axios, like Vue components, and store
$axios.defaults.xsrfHeaderName = 'x-csrftoken'
$axios.defaults.xsrfCookieName = 'csrftoken'
【讨论】:
以上是关于如何在后端使用 Nuxt 和 Django 在我的 axios 请求中发送 CSRFToken?的主要内容,如果未能解决你的问题,请参考以下文章
如何从 Laravel 后端获取数据并在 Vue/Nuxt 前端显示
如何在后端 API 中验证 AzureAD accessToken