Vue表单提交时CSRF令牌未被服务端正确验证怎么办？

宇文文雯提问于 2026-02-14 23:42:41 阅读 15

安全

我在用Vue做用户资料编辑页时，按照文档给POST请求加了CSRF令牌，但后端总返回403错误。明明在表单里加了隐藏字段，代码也按规范写了，到底是哪里出问题呢？


<template>
  <form @submit.prevent="updateProfile">
    <input type="hidden" name="_token" :value="csrfToken">
    <!-- 其他表单字段 -->
    <button type="submit">保存</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      csrfToken: '' // 通过API获取的令牌
    }
  },
  created() {
    fetch('/api/token')
      .then(res => res.json())
      .then(data => this.csrfToken = data.token)
  },
  methods: {
    updateProfile() {
      fetch('/user/profile', {
        method: 'POST',
        body: new FormData(event.target)
      })
    }
  }
}
</script>

我已经确认后端确实返回了令牌值，但抓包发现请求头里没有携带X-CSRF-TOKEN，表单参数里的_token也没有被正确发送。尝试过把令牌放在HTTP头和表单数据里都试过，但后端还是报无效令牌…

我来解答赞 6 收藏

反馈

2 条解答

长孙青燕 Lv1

你这个问题主要是因为 FormData 没有正确处理 Vue 的绑定数据。直接用隐藏字段可能不会被 FormData 自动捕获，我之前也踩过这个坑。你可以试试这样改：

updateProfile() {

  const formData = new FormData(event.target);

  formData.append('_token', this.csrfToken); // 手动添加CSRF令牌

  fetch('/user/profile', {

    method: 'POST',

    body: formData

  })

}

如果还是不行，建议检查后端是否要求特定的头部字段，比如 X-CSRF-TOKEN，那就得在请求头里加：

fetch('/user/profile', {

  method: 'POST',

  headers: {

    'X-CSRF-TOKEN': this.csrfToken

  },

  body: new FormData(event.target)

})

熬夜写代码真累，但希望这能帮你解决问题。

2026-02-19 18:07

シ柯一 Lv1

咱们一步步来排查和解决这个问题。原理是这样，CSRF防护的核心在于服务端生成一个唯一的令牌，客户端在请求时带上这个令牌，服务端再验证这个令牌是否合法。如果验证失败，通常是因为令牌没有正确传递或者令牌本身有问题。

首先，你的代码里通过隐藏字段 _token 来传递令牌，但抓包发现请求参数里没有这个值，这说明表单数据可能没有被正确构造或发送。我们先从这里入手。

第一步：检查表单数据的构造
你在 updateProfile 方法里使用了 new FormData(event.target) 来构造表单数据，但这里有个问题：event 并没有显式绑定到方法里。Vue 的事件处理函数默认不会自动把事件对象传进来，所以这里的 event 是未定义的。改一下代码，明确传递事件对象：

methods: {

  updateProfile(event) { // 明确接收 event 参数

    const formData = new FormData(event.target); // 构造表单数据

    fetch('/user/profile', {

      method: 'POST',

      body: formData

    })

    .then(res => {

      if (!res.ok) throw new Error('请求失败');

      return res.json();

    })

    .then(data => console.log(data))

    .catch(err => console.error(err));

  }

}

这样改完后，表单数据应该能正确包含了 _token 字段。

第二步：确认服务端对令牌的验证逻辑
有些服务端框架（比如 Laravel）默认会从以下几个地方验证 CSRF 令牌：
1. 请求头里的 X-CSRF-TOKEN
2. 表单数据里的 _token 字段
3. Cookie 里的 XSRF-TOKEN

如果你的服务端只认请求头里的 X-CSRF-TOKEN，那么即使表单数据里有 _token，它也会报错。解决办法是手动设置请求头：

methods: {

  updateProfile(event) {

    const formData = new FormData(event.target);

    fetch('/user/profile', {

      method: 'POST',

      headers: {

        'X-CSRF-TOKEN': this.csrfToken // 手动添加请求头

      },

      body: formData

    })

    .then(res => {

      if (!res.ok) throw new Error('请求失败');

      return res.json();

    })

    .then(data => console.log(data))

    .catch(err => console.error(err));

  }

}

这样，无论服务端从哪里取令牌，都能覆盖到。

第三步：检查令牌的生命周期
CSRF 令牌通常是有有效期的，如果你获取令牌后过了很久才提交表单，可能会导致令牌过期。建议你在每次提交表单前重新获取最新的令牌：

methods: {

  async updateProfile(event) {

    await this.fetchCsrfToken(); // 提交前重新获取令牌

    const formData = new FormData(event.target);

    fetch('/user/profile', {

      method: 'POST',

      headers: {

        'X-CSRF-TOKEN': this.csrfToken

      },

      body: formData

    })

    .then(res => {

      if (!res.ok) throw new Error('请求失败');

      return res.json();

    })

    .then(data => console.log(data))

    .catch(err => console.error(err));

  },

  fetchCsrfToken() {

    return fetch('/api/token')

      .then(res => res.json())

      .then(data => this.csrfToken = data.token);

  }

}

第四步：调试和服务端日志
如果以上步骤都做了还是不行，那就得看看服务端的日志了。通常服务端会记录为什么拒绝了这个请求，可能是令牌格式不对、过期了，或者是其他原因。让后端开发帮你查一下具体的错误信息，这样能更快定位问题。

最后总结一下：
1. 确保表单数据正确构造，event 对象要显式传递。
2. 如果服务端只认请求头里的 X-CSRF-TOKEN，记得手动设置请求头。
3. 考虑令牌的有效期，提交前重新获取最新令牌。
4. 查看服务端日志，了解具体拒绝原因。

这些步骤基本能覆盖大部分情况，希望对你有帮助！

2026-02-15 00:01