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

【问题标题】：How do I send CSRFToken in my axios requests using Nuxt and Django on the backend?如何在后端使用 Nuxt 和 Django 在我的 axios 请求中发送 CSRFToken？
【发布时间】：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 部分仅在我重新加载页面时才有效，这并不理想。

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

【问题讨论】：

标签： django-rest-framework nuxt.js django-csrf csrf-token

【解决方案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'
}

【讨论】：