Question

我尝试了 3 天寻找解决方案，但没有找到与我的问题相关的任何内容。我有一个 Nuxt.js 前端，它使用 auth module 从 DRF 后端获取 JWT 令牌。

登录后，服务器打印：

09:43:00

在网络选项卡中，我可以在尝试登录时在请求标头中看到：Forbidden (CSRF cookie not set.): /api/accounts/login/ [04/Jun/2021 10:36:44] "POST /api/accounts/login/ HTTP/1.1" 403 2870，这意味着未正确传递 csrf 令牌。对吗？

在我的 nuxt.config.js 文件中，我有以下设置：

X-CSRFToken: csrftoken

这是我的登录脚本：

axios: {
    baseURL: 'http://localhost:8000',
    headers: {
      "X-CSRFToken": "csrftoken",
    },
    xsrfCookieName: "csrftoken",
    xsrfHeaderName: "X-CSRFToken",
  },

  // authentication module configuration
  auth: {
    strategies: {
      local: {
        endpoints: {
          login: {
            url: '/api/accounts/login/',
            method: 'post',
            propertyName: 'access',
            altProperty: 'refresh'
          },
          logout: {},
          user: false
        }
      }
    },
    redirect: {
      login: '/login',
    },
  },
  router: {
    middleware: ['auth']
  },
  ...
}

如何将 csrf 令牌正确传递到我的 Django 后端？

Answer 1

查看这里的 axios 配置：https://github.com/axios/axios#global-axios-defaults

您可以看到如何使用这样的内容设置默认标题 instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

然后，在 Nuxt 中，您可以扩展默认的 auth 插件：https://auth.nuxtjs.org/recipes/extend

nuxt.config.js

auth: {
  ...
  plugins: [{ src: '~/plugins/nuxt-auth.js', mode: 'client' }],
},

并使用环境变量在那里设置您的 CSRF 令牌。

<块引用>

！！！
这有点棘手，但上面的 plugins 嵌套在 auth 键中，而不是在 nuxt 配置文件的全局范围内。
！！！

/plugins/nuxt-auth.js

export default ({ $axios, $config: { csrfToken } }) => {
  $axios.defaults.headers.common['X-CSRFToken'] = csrfToken;
}

PS：如果你需要一些关于如何在 Nuxt 中使用环境变量的帮助，你可以查看这个问题：How to use .env variables in Nuxt?

Answer 2

我通过 JavaScript 获取 csrf 令牌使其工作，就像在 Django docs 中一样：

~/assets/scripts/cookie.js

export function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

然后我在插件脚本中使用了它：

~/plugins/nuxt-auth.js

import { getCookie } from '../assets/scripts/cookie.js'

export default ({ $axios }) => {
    $axios.defaults.headers.common['X-CSRFToken'] = getCookie('csrftoken');
}

我像这样编辑了 nuxt.config.js 文件：

auth: {
  ...
  plugins: [{ src: '~/plugins/nuxt-auth.js', mode: 'client' }],
  ...
},

现在header中的X-CSRFToken是正确的：

X-CSRFToken: LWs(...)nm9

如何在使用 @nuxtjs/auth-next 时自定义 axios

2 个答案: