You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Laravel部署到线上服务器后AJAX提交出现CSRF-Token Mismatch错误求助

Laravel AJAX提交CSRF Token Mismatch 解决方案

1. 确认页面CSRF meta标签配置正确

确保页面<head>区块存在以下代码,且线上环境渲染后content属性能输出正确的token值:

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

如果页面被CDN/静态缓存缓存,会导致所有用户拿到相同的过期token,需要给包含表单的动态页面配置Cache-Control: no-cache响应头,禁止缓存。

2. 调整AJAX请求配置

你当前的$.ajaxSetup写在submit事件回调内,可能存在请求发起时配置还未生效的问题,建议两种修正方案:

  • 方案1:将$.ajaxSetup移到页面全局初始化位置,不要嵌套在事件回调里
  • 方案2:直接将CSRF头写在AJAX请求配置内,同时可手动给FormData追加token(兼容性更强)

修正后的请求代码示例:

$('#submit').submit(function (e) {
    e.preventDefault();
    const formData = new FormData(this);
    // 手动追加token,适配部分Laravel版本优先读取请求参数的逻辑
    formData.append('_token', $('meta[name="csrf-token"]').attr('content'));

    $.ajax({
        xhr: function() {
          var xhr = new window.XMLHttpRequest();
          xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
              var percentComplete = evt.loaded / evt.total;
              percentComplete = parseInt(percentComplete * 100);
              if (percentComplete === 100) {
                // 进度完成逻辑
              }
            }
          }, false);
          return xhr;
        },
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        url: $(this).attr('action'),
        type: "POST",
        data:  formData,
        dataType:'JSON',
        contentType:false,
        cache: false,
        processData: false,
        // 跨域请求时需要加这个配置携带Cookie
        // withCredentials: true
    });
});

配置完成后可以在浏览器开发者工具的「网络」面板,查看对应请求的请求头,确认X-CSRF-TOKEN是否正确携带,值和meta标签内的是否一致。

3. 检查线上服务器Session/Cookie配置

打开项目.env文件核对以下配置:

  • SESSION_DOMAIN:和你实际访问的域名完全匹配,注意带不带www、子域名的差异,比如访问域名是demo.example.com就填.example.com或者精确匹配demo.example.com
  • SESSION_SECURE_COOKIE:如果站点开启了HTTPS,必须设为true,HTTP站点设为false,否则Session Cookie无法正常存储
  • 确认storage/framework/sessions目录权限为755,属主为web服务器运行用户(如www-data、nginx),否则Session无法写入会导致token校验失败

4. 跨域场景额外配置

如果前端页面域名和后端接口域名不一致,需要额外配置Laravel的CORS跨域中间件,允许请求携带凭证,同时AJAX配置添加withCredentials: true。


内容的提问来源于stack exchange,提问作者user3653474

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.24 05:45:10