Vue表单提交怎么防CSRF？我的CSRF-Token没生效

FSD-倩利提问于 2026-02-02 09:54:36 阅读 81

前端

大家好，我在做一个Vue项目的时候遇到个问题。按照教程设置了CSRF令牌，但测试发现表单提交还是被拦截了。代码是这样的：


<template>
  <form @submit.prevent="submitForm">
    <input type="hidden" name="_token" :value="csrfToken">
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      csrfToken: window.csrfToken // 从服务端注入的全局变量
    }
  },
  methods: {
    submitForm() {
      axios.post('/api/data', formData, {
        headers: { 'X-CSRF-TOKEN': this.csrfToken }
      })
    }
  }
}
</script>

我明明在表单隐藏字段和请求头都加了令牌，但后端返回403错误说令牌无效。试过直接把csrfToken打印出来看，值是正确的。难道是Vue组件里传递的方式有问题？或者还需要其他配置？

CSRF攻击前端安全

我来解答赞 12 收藏

反馈

1 条解答

上官俊荣 Lv1

好的，你的问题我明白。CSRF-Token设置没生效，返回403错误，这说明后端确实没认出你发过去的令牌。这种情况其实挺常见的，咱们一步步来看怎么解决。

### 第一步：确认后端的CSRF校验逻辑
先说下原理。CSRF保护的核心是后端会检查请求中是否携带了合法的CSRF-Token，通常是通过X-CSRF-TOKEN请求头或者表单中的_token字段来校验。所以你需要确保以下几点：
1. 后端生成的CSRF-Token和校验的Token是一致的。
2. 后端支持通过请求头或者表单参数来校验Token。
3. 如果用的是Laravel这种框架，默认可能只支持一种方式（比如只看请求头或只看表单参数）。

你可以先去后端代码里确认一下，它是通过什么方式校验的。如果是Laravel，可以看看VerifyCsrfToken中间件的配置。

---

### 第二步：Vue前端如何正确传递Token
从你的代码来看，你在两个地方设置了Token：
1. 表单里的隐藏字段
2. Axios请求头 headers: { 'X-CSRF-TOKEN': this.csrfToken }

这里需要注意，**后端只会认一种方式**。如果你的后端只校验请求头，那表单里的隐藏字段其实是多余的；如果只校验表单参数，那请求头也没用。

假设你的后端支持请求头校验（大多数现代API都这样），那么重点就在这里：

axios.post('/api/data', formData, {

  headers: { 'X-CSRF-TOKEN': this.csrfToken }

})

这段代码看起来没问题，但有个细节要注意——formData是什么？如果你用的是FormData对象（比如上传文件），那你得确保它不会覆盖掉请求头。

修改后的代码可以这样写：



methods: {

  submitForm() {

    // 确保formData是一个普通对象，而不是FormData实例

    const formData = { field1: 'value1', field2: 'value2' }; // 示例数据



    axios.post('/api/data', formData, {

      headers: {

        'X-CSRF-TOKEN': this.csrfToken, // 设置Token到请求头

        'Content-Type': 'application/json' // 确保内容类型正确

      }

    })

    .then(response => {

      console.log('提交成功:', response.data);

    })

    .catch(error => {

      console.error('提交失败:', error.response ? error.response.data : error.message);

    });

  }

}

---

### 第三步：全局设置Axios默认请求头
为了方便管理，你可以把CSRF-Token设置成Axios的全局默认请求头。这样每次请求都会自动带上Token，不用每个地方都手动加。

在你的Vue项目的入口文件（比如main.js）中添加：



import axios from 'axios';



// 假设csrfToken是从服务端注入的全局变量

const csrfToken = window.csrfToken;



// 设置Axios默认请求头

axios.defaults.headers.common['X-CSRF-TOKEN'] = csrfToken;



// 然后你可以直接发起请求，不需要每次都手动传Token

axios.post('/api/data', { field1: 'value1' })

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

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

这样改完之后，你所有的POST、PUT等请求都会自动带上CSRF-Token，省事多了。

---

### 第四步：检查Token的有效性
最后再强调一点，Token的有效性。有时候Token过期了或者被篡改了，也会导致403错误。你可以尝试以下步骤：
1. 打印出window.csrfToken的值，确保它和后端生成的一致。
2. 在浏览器开发者工具里查看实际发出的请求头，确认X-CSRF-TOKEN有没有正确带上。
3. 如果还是不行，试着清空缓存或者重启服务器，有时候后端的Token状态可能会有问题。

---

### 总结
- 确认后端的CSRF校验方式（请求头还是表单参数）。
- 使用Axios时，确保Content-Type正确，避免被覆盖。
- 全局设置Axios默认请求头，简化代码。
- 检查Token的有效性，必要时调试网络请求。

按上面的步骤走一遍，应该能解决问题。如果还有问题，可以把后端的CSRF校验逻辑贴出来，我们一起看看是不是那里有坑。

2026-02-02 10:00