Vue.js 2中Axios请求返回HTML而非JSON的问题排查

这种情况我之前在Laravel+Vue的项目里也踩过坑，结合你的描述，大概率是CSRF令牌验证失败或者会话过期导致的重定向，给你几个排查和解决的方向：

1. CSRF令牌未正确携带或已过期 #

Laravel对AJAX请求默认会校验CSRF令牌，虽然你设置了X-Requested-With，但如果请求里没有带上有效的CSRF令牌，Laravel会悄悄重定向到首页（返回HTML），而且状态码可能显示200（因为前端可能自动跟随了重定向）。

解决办法：

• 确保Axios自动带上CSRF令牌：在你的Vue项目入口文件（比如app.js）里，从页面的meta标签获取令牌并设置到Axios的默认headers中：

  // 从页面meta标签提取CSRF令牌
  const csrfToken = document.head.querySelector('meta[name="csrf-token"]').content;
  // 配置Axios默认请求头
  Axios.defaults.headers.common['X-CSRF-TOKEN'] = csrfToken;
  Axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
  

• 注意：如果你的项目是多页模式（非SPA），每次页面加载都要重新获取令牌；如果是SPA，建议在请求拦截器里检查令牌有效性，避免过期。

2. 会话过期导致重定向到登录/首页 #

如果用户的会话过期了，Laravel会把请求重定向到登录页面（或首页），这时候AJAX请求收到的就是目标页面的HTML。你可以对比返回的HTML片段，确认是不是登录页或首页的内容。

解决办法：

• 修改Laravel的异常处理器，让AJAX请求收到JSON格式的未授权响应，而不是重定向：
  在app/Exceptions/Handler.php中修改unauthenticated方法：

  use Illuminate\Auth\AuthenticationException;
  
  protected function unauthenticated($request, AuthenticationException $exception)
  {
      if ($request->expectsJson()) {
          return response()->json(['error' => '会话已过期，请重新登录'], 401);
      }
  
      return redirect()->guest(route('login'));
  }
  

• 这样前端就能收到明确的401状态码，方便你处理登录跳转逻辑。

3. 路由匹配优先级冲突 #

如果你的AJAX路由和返回页面的web路由URL重复，Laravel会优先匹配先定义的路由。比如你有一个web路由Route::get('/televisies', 'TelevisionController@index')返回页面，又有一个API路由Route::get('/televisies', 'Api\TelevisionController@index')返回JSON，请求会优先匹配web路由，返回HTML。

解决办法：

• 把API路由统一放在routes/api.php中，Laravel会自动给这些路由加上/api前缀，避免和web路由冲突；
• 如果不想用/api前缀，把API路由写在web路由的前面，让Laravel优先匹配API路由；
• 清除路由缓存：运行php artisan route:clear，避免缓存的路由导致匹配错误。

4. 浏览器缓存GET请求 #

部分浏览器会缓存GET请求的结果，导致你跳转回来后，浏览器直接返回之前缓存的页面HTML（而非最新的AJAX响应）。

解决办法：

• 在Axios请求中添加cache: false参数，禁止浏览器缓存：

  Axios.get(url, { 
      params: params,
      cache: false
  }).then((response) => { 
      console.log(response); 
  });
  

• 或者在Laravel后端设置响应头禁止缓存：

  return response()->json($yourData)->header('Cache-Control', 'no-cache, no-store, must-revalidate');
  

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