如何在 Vue.js 中获取“csrftoken”？答案

【问题标题】：How to get `csrftoken` in Vue.js?如何在 Vue.js 中获取“csrftoken”？
【发布时间】：2025-11-23 10:55:02
【问题描述】：

在 Vue.js 项目中，我如何获得csrftoken？

我尝试使用js-cookie，但无法获取：

import Cookies from 'js-cookie';

if (Cookies.get('csrftoken')!==undefined) {   // there will skip, because the Cookies.get('csrftoken') is undefined.

  config.headers['x-csrftoken']= Cookies.get('csrftoken');  // 'CSRFToken '

}

但我可以得到其他 cookie。

编辑

Cookies.get('csrftoken')

此代码获取undefined。

但是当我访问时，有csrftoken。

【问题讨论】：

我使用调试器，在那里，我控制台document.cookie，没有csrftoken和sessionid，当我请求一个api时，它们会出现在请求头中的Cookie中.

标签： vue.js js-cookie

【解决方案1】：

您是否尝试过在服务器级别的 DOM 中简单地打印它。从那里得到它。 Laravel 就是一个很好的例子：

https://laravel.com/docs/5.6/csrf#csrf-x-xsrf-token

<meta name="csrf-token" content="{{ csrf_token() }}">

当然用你的服务器语言和 CSRF 令牌替换 {{ csrf_token() }}。

在你的 JS 中：

config.headers['x-csrftoken']=  $('meta[name="csrf-token"]').attr('content')

如果使用 jQuery。

【讨论】：

它说将csrftoken保存在<meta name="csrf-token" content="{{ csrf_token() }}">标签中。但我使用 Vue.js 作为前端。我可以这样写吗？
所以它只存在于 Cookies 中，没有其他地方？抱歉，该页面最初是由服务器生成的，而您希望在 JS 端获取它。
尝试通过console.log(Cookies.get('csrftoken'))或Cookie对象获取正确的key。
哦，Cookies.get('csrftoken') 无法获取 csrftoken。

【解决方案2】：

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');

从 cookie 中获取 csrf：

 function getCookie(name)
  {
    var re = new RegExp(name + "=([^;]+)");
    var value = re.exec(document.cookie);
    return (value != null) ? unescape(value[1]) : null;
  }

【讨论】：

#token?我想得到csrftoken。应该改成这个？
您可以使用 document.cookie 获取 cookie。我希望这会有所帮助！
我不确定js-cookie是否将cookie数据存储在document.cookie中。
如果cookie是http-only怎么办？