Laravel 5.5原生JS Ajax更新数据遇500错误，疑CSRF令牌问题

是的，你遇到的500内部服务器错误几乎可以肯定是CSRF令牌验证失败导致的。Laravel默认会对所有非GET类型的请求（POST/PUT/DELETE等）强制校验CSRF令牌，令牌缺失、无效或者不匹配都会触发服务器错误。

接下来我会一步步教你正确在Vanilla JS的Ajax请求中添加CSRF令牌，并处理PUT请求的特殊要求：

1. 确保页面存在CSRF令牌的Meta标签 #

首先检查你的Laravel Blade模板里是否包含这个默认的Meta标签（一般Laravel的默认模板已经自带，如果没有就加上）：

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

这个标签会自动渲染当前会话的有效CSRF令牌，不要像你代码里那样硬编码令牌——令牌会随会话更新，硬编码会导致后续请求失效。

2. 正确构造请求参数与发送Ajax #

Laravel不直接支持原生Ajax的PUT请求（存在部分浏览器兼容性问题），所以需要通过POST请求加上_method=PUT参数来模拟PUT请求，同时带上有效的CSRF令牌。

这里是修正后的完整代码：

// 从Meta标签获取有效CSRF令牌
const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

// 构造请求参数
const params = {
    _method: "PUT", // 告诉Laravel这是一个PUT请求
    _token: csrfToken,
    account: "my account",
    username: "user1"
};

// 将参数转换为URL编码格式（符合表单提交的Content-Type要求）
const formData = new URLSearchParams();
Object.keys(params).forEach(key => {
    formData.append(key, params[key]);
});

// 初始化并发送Ajax请求
const xhr = new XMLHttpRequest();
// 注意这里用POST方法，因为我们靠_method参数模拟PUT
xhr.open('POST', '/你的更新接口路由地址', true);
// 设置请求头，确保服务器能正确解析参数
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        // 请求成功的处理逻辑
        console.log('数据更新成功:', xhr.responseText);
    } else {
        // 请求失败的处理逻辑
        console.error('更新失败，状态码:', xhr.status);
    }
};

xhr.onerror = function() {
    console.error('网络请求出错，请检查连接');
};

xhr.send(formData);

3. 额外注意事项 #

• 确认你的路由定义是PUT类型：在routes/web.php中，更新路由应该这样定义：

Route::put('/your-update-path', 'YourController@update');

• 不要手动拼接参数字符串（你代码里的let data = ''这种方式容易出错），用URLSearchParams或者FormData来处理参数更可靠。
• 如果你的请求是发送JSON格式数据，需要把CSRF令牌放在请求头里：

xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken);
xhr.setRequestHeader('Content-Type', 'application/json');
// 发送时要把参数转为JSON字符串
xhr.send(JSON.stringify(params));

这种情况下就不需要_token参数了，但同样要带上_method=PUT（如果是PUT请求）。

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