添加隐藏输入_token后Laravel5.5+VueJS2.x标准POST表单失效

我来帮你排查这个问题，你遇到的情况大概率是CSRF令牌没有正确赋值到隐藏输入框，导致Laravel的CSRF验证失败，拦截了POST请求。下面给你几个可行的解决思路：

1. 直接在模板中输出CSRF令牌（最简单的方案） #

不需要用Vue的v-model绑定，直接在隐藏输入框里用Laravel的辅助函数输出令牌值，页面渲染时就会直接填充正确的令牌：

<form action="http://192.168.1.100/login" method="POST">
    <input name="_token" type="hidden" value="{{ csrf_token() }}">
    <button type="submit"> SUBMIT </button>
</form>

这个方法最直接，普通表单提交不需要Vue参与令牌的动态绑定，页面渲染时就把令牌写死在input里即可。

2. 如果必须用Vue绑定令牌（比如动态场景） #

如果你确实需要通过Vue来管理这个令牌值，要确保Vue实例能正确获取到Laravel的CSRF令牌：

步骤1：确保页面头部有CSRF meta标签 #

Laravel默认会在resources/views/layouts/app.blade.php里包含这个标签，如果没有的话手动加上：

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

步骤2：在Vue实例中获取并赋值令牌 #

在你的Vue组件或实例里，从meta标签读取令牌值，赋值给csrfToken变量：

new Vue({
    el: '#app',
    data() {
        return {
            csrfToken: document.querySelector('meta[name="csrf-token"]').content
        }
    }
})

这样你的v-model="csrfToken"就能正确绑定到令牌值，表单提交时就能带上有效的CSRF令牌了。

3. 排查其他可能的问题 #

• 检查浏览器控制台是否有报错，比如csrfToken变量未定义，或者meta标签找不到的错误
• 确认你的请求地址http://192.168.1.100/login和当前页面域名是否一致，跨域请求的话Laravel的CSRF验证会失败（如果是跨域需要额外配置CORS和CSRF规则）
• 查看Laravel日志（storage/logs/laravel.log），里面会有具体的CSRF验证失败原因，能帮你更快定位问题

内容的提问来源于stack exchange，提问作者Hus R Kozk