Laravel搜索功能路由路径异常引发404问题的排查与解决

这个问题其实是典型的相对路径 vs 绝对路径的坑，我来帮你一步步搞定：

问题根源 #

你JS里写的url:"autocomplete"是相对路径，当页面处于productDetail/{id}这类子路由页面时，浏览器会自动把这个相对路径拼在当前页面URL的后面，变成productDetail/autocomplete，自然就触发404了——因为你的路由是根路径下的/autocomplete。

解决方案（利用你已经定义好的全局变量） #

你已经在header.blade.php里通过{{ route('autocomplete') }}生成了正确的完整路由地址，并且存在了accessurl全局变量里，直接在AJAX请求里用这个变量就行：

修改你的JS代码里的url参数：

$(document).ready(function(){
 $('#product_name').keyup(function(){
  var query = $(this).val();
  if(query != '') {
   var _token = $('input[name="_token"]').val();
   $.ajax({
    url: accessurl, // 替换原来的"autocomplete"，用全局变量
    method:"GET",
    data:{query:query, _token:_token},
    success:function(data){
     $('#product_name').fadeIn();
     $('#product_list').html(data);
    }
   });
  }
 });
 $(document).on('click', 'li', function(){
  $('#product_name').val($(this).text());
  $('#product_list').fadeOut();
 });
});

为什么这个方案有效？ #

route('autocomplete')会生成基于你应用根URL的完整绝对路径（比如http://your-app.com/autocomplete），不管当前页面在哪个子路由下，AJAX请求都会直接指向正确的路由地址，不会出现相对路径拼接错误的问题。

额外优化建议（可选） #

1. 因为是GET请求，其实_token参数可以不用传（Laravel的CSRF保护默认只针对POST/PUT/DELETE等修改类请求），如果不需要可以去掉这部分数据；
2. 可以把搜索表单的action属性改成{{ route('getProduct') }}，避免表单提交时也出现类似的相对路径问题：

<form class="ps-search--header" action="{{ route('getProduct') }}" method="post">

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