Vue.js中使用axios发送请求时如何获取X-CSRF-TOKEN

常见获取X-CSRF-TOKEN的实现方案 #

先确认你的CSRF令牌存储位置，对应两种最常用的处理方式：

• 场景1：令牌存储在Cookie的XSRF-TOKEN字段（Laravel、Django等主流后端框架默认配置）
  axios默认支持自动读取Cookie内的XSRF-TOKEN并写入请求头，仅需要调整全局配置匹配后端要求的请求头名即可，在项目入口文件（如main.js）添加以下配置：

  import axios from "axios";
  // 对应Cookie中存储CSRF令牌的字段名，可根据后端实际配置修改
  axios.defaults.xsrfCookieName = 'XSRF-TOKEN'
  // 对应后端要求的请求头字段名，调整为你需要的X-CSRF-TOKEN
  axios.defaults.xsrfHeaderName = 'X-CSRF-TOKEN'
  // 跨域请求场景必须添加，同域请求可省略
  axios.defaults.withCredentials = true
  

• 场景2：令牌由后端渲染到页面meta标签中（服务端渲染项目常用方案）
  直接从DOM中读取meta标签的content值即可，示例如下：

  import axios from "axios";
  // 取meta标签中的CSRF令牌，name属性和你页面实际配置一致即可
  const csrfToken = document.querySelector('meta[name="csrf-token"]').content
  // 全局配置默认请求头
  axios.defaults.headers.common['X-CSRF-TOKEN'] = csrfToken
  

你的上传代码调整示例 #

如果不需要全局配置，也可以在单次请求中单独传入配置：

<script>
import axios from "axios";

export default {
  name: "UploadFiles",
  data() {
    return{
      file: ""
    }
  },
  methods:{
    selectFile(){
      this.file = this.$refs.file.files[0]
    },
    async sendFile() {
      const formData = new FormData();
      formData.append('file', this.file);
      await axios.post('/user/uploadImages', formData, {
        withCredentials: true,
        headers: {
          // 如果是从meta标签取令牌，直接在这里赋值即可
          // 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        }
      })
    }
  }
}
</script>

常见排查点 #

• 打开浏览器控制台存储面板，确认Cookie中存在XSRF-TOKEN字段，或页面meta标签存在对应CSRF令牌
• 确认后端配置的跨域规则允许携带Cookie，且请求头X-CSRF-TOKEN在允许的头字段列表内

内容的提问来源于stack exchange，提问作者Michael Joseph Jackson