Ajax请求在Firefox和Safari中失败，Chrome中可正常运行

我帮你梳理下这个跨浏览器的Ajax问题——Chrome里能正常跑，但Firefox和Safari会触发Laravel的MethodNotAllowedHTTPException，请求发出去后没拿到状态码就跳转回原页面，这大概率是几个细节没处理好，咱们一步步来修复：

问题根源分析 #

1. 表单默认提交行为没被阻止：你注释掉了event.preventDefault();，但Firefox/Safari对表单提交的优先级处理和Chrome不一样，会优先触发表单默认跳转，直接中断Ajax请求，后端收到的可能是GET请求（而非你要的POST），自然就抛出方法不允许的错误。
2. Content-Type与数据格式不匹配：你设置了contentType: "application/json"，但直接传了普通JS对象，没有转成JSON字符串，后端没法正确解析请求体，可能导致路由匹配失败。
3. CSRF令牌重复传递：同时在请求头和请求数据里传了CSRF令牌，虽然不致命，但某些浏览器可能会因此触发验证异常。

具体修复步骤 #

• 恢复并正确使用event.preventDefault()：必须阻止表单默认提交，避免页面跳转打断Ajax请求。
• 统一CSRF令牌传递方式：推荐只在请求头里传递，更符合Laravel的验证逻辑。
• 将请求数据转为JSON字符串：对应application/json的Content-Type，确保后端能正确解析。
• 调用函数时传入事件对象：如果是通过按钮onclick调用，要把event传进去。

修改后的完整代码 #

function transactionAction(event, value, id, amount){ 
    // 关键：阻止表单默认提交行为，避免页面跳转
    event.preventDefault(); 
    document.getElementById("formSubmitButton").disabled = true; 
    var SITE_URL = "{{url('')}}" + '/web/v1/dispute-refund'; 
    var actionId = value; 
    var pId = id; 

    $.ajax({ 
        type: 'POST', 
        url:SITE_URL, 
        headers: { 
            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') 
        }, 
        contentType: "application/json; charset=utf-8", 
        dataType: "json", 
        // 把JS对象转为JSON字符串，匹配Content-Type
        data: JSON.stringify({ 
            actionId: actionId, 
            pId: pId, 
            amount: amount 
        }), 
        success: function (response){ 
            $('.refund').modal('hide'); 
            if(response.result.status == true){ 
                $('.error-divbox-master').html('<div class="alert alert-success alert-dismissible"><h4><i class="icon fa fa-check"></i>'+response.result.message+'</h4></div>').delay(10000).show().fadeOut('slow'); 
            }else{ 
                $('.error-divbox-master').html('<div class="alert alert-danger alert-dismissible"><h4><i class="icon fa fa-check"></i>'+response.result.message+'</h4></div>').delay(10000).show().fadeOut('slow'); 
            } 
            document.getElementById("formSubmitButton").disabled = false; 
            setInterval(function(){location.reload();},3000); 
        }, 
        error: function (xhr, status, error) { 
            $('.refund').modal('hide'); 
            // 优化错误处理，避免response.result不存在导致的报错
            var errorMsg = xhr.responseJSON?.result?.message || '请求出错，请稍后重试';
            $('.error-divbox-master').html('<div class="alert alert-danger alert-dismissible"><h4><i class="icon fa fa-exclamation-triangle"></i>'+errorMsg+'</h4></div>').delay(10000).show().fadeOut('slow'); 
            document.getElementById("formSubmitButton").disabled = false; 
        } 
    }); 
}

额外注意事项 #

• 调用函数时要传事件对象：比如按钮的onclick要写成onclick="transactionAction(event, value, id, amount)"
• 检查Laravel路由：确保/web/v1/dispute-refund确实是用Route::post()定义的，没有和其他路由冲突
• 调试时看网络面板：在Firefox/Safari的开发者工具里，确认请求方法是POST，请求体是正确的JSON格式，CSRF令牌在请求头里正常传递

内容的提问来源于stack exchange，提问作者abhi.abik