Vue.js+Laravel登录表单CSRF报错排查请求

1. 确认Laravel CSRF验证范围 #

Laravel默认web路由组启用CSRF验证，api路由组默认关闭（通过App\Http\Middleware\VerifyCsrfToken的$except数组或路由分组控制）：

• 若登录API在routes/api.php：检查是否手动给api路由组添加了VerifyCsrfToken中间件，Postman正常大概率是api路由默认不校验CSRF，而Vue请求可能误走了web路由逻辑。
• 若登录API在routes/web.php：必须携带CSRF token才能发起请求。

2. Vue端CSRF token传递校验 #

Laravel会自动在Blade页面头部注入<meta name="csrf-token" content="{{ csrf_token() }}">，需确保Vue正确携带该token：

• 检查页面是否存在上述meta标签，纯Vue项目需通过接口获取或配置在环境变量中。
• 在请求拦截器中设置X-CSRF-TOKEN请求头（以axios为例）：

axios.interceptors.request.use(config => {
    config.headers['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').content;
    return config;
});

3. 请求格式与参数检查 #

Postman可能使用form-data或x-www-form-urlencoded格式，而Vue默认发送application/json，需确认：

• 若为web路由下的接口，JSON请求只需在请求头携带X-CSRF-TOKEN，无需在请求体中添加_token字段。
• 验证VerifyCsrfToken中间件的tokensMatch方法，默认支持X-CSRF-TOKEN和X-XSRF-TOKEN请求头，确保请求头配置正确。

4. LoginController验证逻辑排查 #

检查控制器是否误将_token加入验证规则，示例：

// 错误示例：无需强制验证_token
$request->validate([
    '_token' => 'required',
    'email' => 'required|email',
    'password' => 'required'
]);

正确做法：仅验证登录必要字段（邮箱、密码），JSON请求无需校验_token。

5. 跨域场景配置（若Vue与Laravel跨域部署） #

若两端不在同一域名下，需配置CORS并确保CSRF token跨域可传递：

• 安装laravel-cors扩展，配置允许的请求头包含X-CSRF-TOKEN。
• 开启axios携带cookie：axios.defaults.withCredentials = true;，同时将Laravelconfig/session.php中same_site设为'lax'或'none'（HTTPS场景）。

内容的提问来源于stack exchange，提问作者abi jega