Laravel与VueJS无法读取meta标签中CSRF令牌问题咨询

我之前也碰到过一模一样的情况——明明在head里加了meta标签，控制台还是跳这个报错，折腾了好一会儿才找到问题。给你整理几个最容易遗漏的排查方向：

• 检查meta标签的命名是否完全匹配
  Laravel的axios配置默认只会读取name="csrf-token"的meta标签，你得确保标签写法完全正确：

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

  别把name写成csrf、token这类变体，拼写差一个字符都读不到。

• 确认axios的CSRF配置是否正常加载
  虽然你说没修改app.js，但有时候缓存或者初始化顺序会搞鬼。打开app.js看看这段默认配置是不是还在：

  window.axios = require('axios');
  window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
  
  let token = document.head.querySelector('meta[name="csrf-token"]');
  if (token) {
      window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
  } else {
      console.error('CSRF token not found');
  }
  

  可以直接在控制台输入document.head.querySelector('meta[name="csrf-token"]')测试，如果返回null，那肯定是meta标签的渲染有问题；如果能拿到标签，再看token.content是不是有效令牌。

• 排查请求的发起时机和方式
  如果你的Vue组件在DOM还没完全渲染（比如meta标签还没加载）就发起请求，axios自然拿不到token。确保你的请求是在mounted钩子或者DOMContentLoaded事件之后触发的。另外，GET请求不需要CSRF验证，但POST/PUT/DELETE这类修改请求必须带上token，别搞混了请求方式。

• 清理缓存试试
  有时候浏览器缓存会让旧的meta标签内容残留，或者Laravel的视图缓存导致新的token没渲染出来。试试：

  • 用Ctrl+Shift+R强制刷新页面，清除浏览器缓存
  • 运行Laravel的缓存清理命令：

    php artisan cache:clear
    php artisan view:clear
    

• 检查是否有其他代码干扰了meta标签
  比如某些第三方脚本或者自定义JS不小心移除了meta标签，你可以在页面加载完成后，右键查看页面源代码，确认csrf-token的meta标签确实存在，并且content里是有效的令牌字符串。

内容的提问来源于stack exchange，提问作者mile-panic