Laravel中使用Fetch API时$request->ajax()无法检测AJAX请求

这个问题我之前也碰到过，根源其实很简单——Laravel判断AJAX请求的规则，和Fetch API的默认请求头设置不匹配：

为什么会出现这个问题？ #

Laravel里的$request->ajax()方法，本质是检查请求头中是否存在X-Requested-With: XMLHttpRequest这个标识。jQuery、Axios这类封装好的AJAX库，发起请求时会自动给请求添加这个头；但Fetch作为原生浏览器API，默认不会附带这类自定义头，所以Laravel就识别不出这是AJAX请求，直接返回了Not Ajax!。

两种解决方法 #

方法一：给Fetch请求手动添加请求头 #

这是最贴合Laravel默认逻辑的方案，只需要在Fetch的配置里补上X-Requested-With头即可：

let route = '{{ route("load") }}' + '?q=' + encodeURI('{{ $para }}');
// 添加上headers配置项
fetch(route, {
  headers: {
    'X-Requested-With': 'XMLHttpRequest'
  }
})
 .then(response => {
 if(!response.ok) {
 throw new Error('Network response was not ok');
 }
 return response.text();
 })
 .then(data => {
 console.log(data);
 })
 .catch((error) => {
 console.error('Error:', error);
 })

方法二：修改控制器的判断逻辑 #

如果你不想调整前端代码，也可以修改后端的判断规则，同时兼容AJAX和Fetch的请求场景：

public function loadData( Request $request ) {
 // 同时检查AJAX标识和是否期望JSON响应
 if( $request->ajax() || $request->wantsJson() ) {
 return $request->query('q');
 }
 return 'Not Ajax!';
}

不过更推荐第一种方法，因为它能让你的Fetch请求和其他AJAX请求保持一致的标识规则，避免后续出现其他兼容问题。

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