Laravel 8结合AJAX实现Excel导入数据库时路由请求方法报错如何解决

• AJAX请求配置错误，显式/隐式使用了GET方法：比如请求方法参数拼写错误、误用$.get()类的GET请求方法、method参数值大小写错误导致配置不生效。
• 请求过程触发301/302重定向，重定向默认会将POST请求转为GET请求：
  • 请求的URL末尾多了斜杠，Laravel默认会将带尾斜杠的POST请求301重定向到无尾斜杠的地址，请求方法自动转为GET
  • 路由配置了权限校验中间件，身份/权限校验不通过时触发跳转，请求方法转为GET
  • URL拼写错误（少前缀、单词拼写错误），触发框架的跳转逻辑导致方法变更
• 未禁用表单默认提交行为，点击提交按钮时表单默认的GET提交逻辑优先触发，覆盖了自定义AJAX请求
• 文件上传的AJAX参数配置错误，导致请求解析失败，框架路由匹配时 fallback 到GET规则

1. 校验AJAX请求方法配置 #

确认请求方法显式指定为POST，参数拼写、大小写正确：

• 原生JS写法：

const xhr = new XMLHttpRequest();
xhr.open('POST', '/mantenimiento/validar'); // 确认方法为大写POST，参数无拼写错误

• jQuery写法：

$.ajax({
  url: '/mantenimiento/validar',
  method: 'POST', // 不要写错为get，也不要拼错参数名
  // 其他配置
})

2. 修复重定向问题 #

• 确认请求URL和路由定义完全一致，不要加多余的尾斜杠：路由定义为mantenimiento/validar时，请求URL不要写为mantenimiento/validar/
• 临时注释路由的权限中间件测试，如果请求正常，说明是权限校验跳转导致的问题，调整权限逻辑即可。

3. 禁用表单默认提交行为 #

给表单的submit事件添加阻止默认行为的逻辑，避免原生提交覆盖AJAX请求：

document.querySelector('#importForm').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止原生表单提交
  // 在此处执行AJAX上传逻辑
})

4. 正确配置文件上传的AJAX参数 #

上传Excel文件必须使用FormData传输，同时配置对应的请求头和参数：

• 原生JS完整示例：

const form = document.querySelector('#importForm');
const formData = new FormData(form);
const xhr = new XMLHttpRequest();
xhr.open('POST', '/mantenimiento/validar');
// 加入Laravel要求的CSRF令牌
xhr.setRequestHeader('X-CSRF-TOKEN', document.querySelector('meta[name="csrf-token"]').content);
xhr.onload = function() {
  if(xhr.status === 200) {
    // 处理成功逻辑
  }
}
xhr.send(formData);

• jQuery完整示例：

const formData = new FormData($('#importForm')[0]);
$.ajax({
  url: '/mantenimiento/validar',
  method: 'POST',
  data: formData,
  contentType: false, // 禁止手动设置contentType，让浏览器自动生成带boundary的请求头
  processData: false, // 禁止序列化FormData，避免文件内容损坏
  headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  },
  success: function(res) {
    // 处理成功逻辑
  }
})

5. 临时调试方案 #

如果以上排查都没有定位到问题，可以临时将路由改为Route::any('mantenimiento/validar',[ImportController::class,'import'])，在控制器方法中打印request()->method()，确认实际到达后端的请求方法，反向排查前端请求的问题。

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