Vue+Laravel Sanctum请求报419 CSRF token mismatch错误如何解决

核心问题原因 #

浏览器对localhost和127.0.0.1会识别为两个完全独立的站点，你当前配置中后端请求地址、Session域名、状态校验域名不统一，导致Sanctum下发的CSRF Cookie无法在请求中正确传递，出现校验失败。

具体修改步骤 #

1. 修正.env配置文件 #

将域名相关配置统一规则，修改如下：

SESSION_DRIVER=cookie
# 统一使用127.0.0.1作为根域名，匹配后端服务地址
SESSION_DOMAIN=127.0.0.1
# 补充前后端所有用到的域到状态校验白名单，不要带http/https前缀
SANCTUM_STATEFUL_DOMAINS=127.0.0.1:8000,localhost:8080,127.0.0.1:8080

修改完后执行php artisan config:clear清空Laravel配置缓存。

2. 保持前后端请求域名统一 #

两种方案二选一即可：

• 方案1：将前端axios的baseURL改为http://localhost:8000，和原有localhost配置对齐
• 方案2：按第一步的修改，保持baseURL为http://127.0.0.1:8000即可

3. 修正CORS配置（避免后续跨域问题） #

开启supports_credentials时不允许使用通配符作为允许源，修改config/cors.php：

'allowed_origins' => ['http://localhost:8080', 'http://127.0.0.1:8080'],

修改后同样执行php artisan config:clear清空配置缓存。

4. 清理缓存重试 #

修改完所有配置后，清空浏览器的Cookie和本地缓存，重启前后端服务再测试即可。
如果仍然报错，检查是否开启了代理、VPN工具篡改了请求头的Cookie字段

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