Laravel9+Vue.js2生产环境及本地虚拟主机CSRF token mismatch问题求助

开发者阿泽

2026-7-20

问题描述

基于Laravel 9 + Vue.js 2（Jetstream）开发的应用，本地用php artisan serve运行正常，可完成登录及CRUD操作；一年前搭建的预发布服务器运行也无异常。
异常场景：部署到生产服务器后，Jetstream默认生成的登录页面出现CSRF token mismatch错误；同一本地系统配置虚拟主机后，也出现相同错误。
背景：已成功部署多个同技术栈项目到生产环境，现求助解决该问题。

登录页面核心Vue代码：

data() {
    return {
        form: this.$inertia.form({
            email: "",
            password: "",
            remember: false,
        }),
        lang: "",
    };
},

props: ["login"],

methods: {
    submit() {
        if (this.form.email != "" && this.form.password != "") {
            this.form
                .transform((data) => ({
                    ...data,
                    remember: this.form.remember ? "on" : "",
                }))
                .post(this.route("login"), {
                    onFinish: () => this.form.reset("password"),
                });
        }
    },
},

错误截图：
CSRF token mismatch错误截图

排查与解决建议

检查域名相关配置
确认.env文件中SESSION_DOMAIN和APP_URL与当前运行的域名一致：
- 本地虚拟主机场景，SESSION_DOMAIN设为虚拟主机域名（如app.test或localhost），APP_URL对应设为http://app.test或http://localhost
- 生产环境，SESSION_DOMAIN设为实际域名（顶级域名可加前缀.，如.example.com），APP_URL设为生产环境的完整URL（如https://example.com）
调整Cookie安全配置
- 生产环境启用HTTPS时，需设置SESSION_SECURE_COOKIE=true；本地HTTP虚拟主机场景设为false
- 确认APP_ENV配置：生产环境设为production，本地开发/虚拟主机场景设为local或development
验证CSRF token传递
检查页面头部是否包含正确的<meta name="csrf-token">标签，Inertia会自动读取该标签值并在请求头中携带X-XSRF-TOKEN；若Cookie未正确设置，该请求头会缺失，导致token不匹配。
清理缓存与Cookie
执行Laravel缓存清理命令：
```
php artisan config:clear
php artisan cache:clear
php artisan route:clear
php artisan view:clear
```
同时清除浏览器对应域名的缓存和Cookie，避免旧的无效Cookie干扰。
检查虚拟主机配置（本地场景）
- 确保虚拟主机的文档根目录指向项目的public文件夹，而非项目根目录
- 若使用Apache/Nginx，确认配置中正确处理X-Forwarded-For、X-Forwarded-Proto请求头，避免Laravel错误识别请求协议或来源。

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