vue+thinkphp6如何显示接口报错信息

Question

vuecli+thinkphp6 前后端分离，vue读取接口时，如果接口出现错误，只显示跨域的错误信息，看不到接口的报错信息，要如何设置才能看到接口报错信息方便调试？

Answer 1

• 建议你看下这篇博客👉 ：thinkphp6 + vue前端实现上传图片功能组件
• 除此之外, 这篇博客: ThinkPHP+Vue的单页面的部署经历中的 问题三 ThinkPHP项目部署后出现500状态码 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 答： 这个问题可以去我们的apache服务器看一下错误日志

  
  

  我的报错原因是因为什么响应头不规范的问题，于是我修改了我的跨域配置，果然就是它，这个问题困扰了我两天，才得以解决，可惜错误日志没有截图下来，有点可惜，大家也可以将这个错误日志先复制到翻译软件上，自己试着看看能不能看得懂，看不懂的话再进行百度，有时候比你直接百度要更快解决问题

• 您还可以看一下 lampol老师的tp6/thinkphp6接口api开发/前后端分离/电商实战课程中的 tp6接口实战之前台vue页面搭建配置访问小节, 巩固相关知识点
  
• 以下回答由chatgpt基于相关博客总结生成:

  根据参考资料中的内容，可以通过自定义异常处理机制来实现在vue+thinkphp6中显示接口错误信息的需求。具体实现步骤如下：

  1. 创建一个自定义异常类，继承\think\Exception类，并实现\app\exception\CustomExceptionInterface接口，例如：

  <?php 
  namespace app\exception;
  
  use think\Exception;
  use think\facade\Log;
  
  /**
   * 自定义异常类
   */
  class ApiException extends Exception implements CustomExceptionInterface
  {
      protected $message = '';
      protected $code = 0;
      protected $data = '';
  
      /**
       * 构造函数
       * @param string $msg 错误信息
       * @param int $code 错误码
       * @param mixed $data 返回数据
       */
      public function __construct($msg = '', $code = 0, $data = '')
      {
          $this->message = $msg;
          $this->code = $code;
          $this->data = $data;
      }
  
      /**
       * 显示错误信息
       */
      public function showMsg()
      {
          $msg = [
              'code' => $this->code,
              'msg' => $this->message,
              'data' => $this->data,
          ];
          return json($msg);
      }
  
      /**
       * 记录异常日志
       * 异常不记录到日志的情况：
       * 1. 线上环境且不是500
       * 2. 操作者本身是管理员操作的
       * 
       * @return void
       */
      public function report()
      {
          $msg = 'code:'.$this->code.' msg:'.$this->message.' data:'.json_encode($this->data);
          if (config('app_debug') || $this->code == 500 || !empty(session('admin'))) {
              Log::error($msg);
          }
      }
  }
  

  通过继承\think\Exception，我们可以在抛出异常时获得异常信息，进而处理异常。ApiException类中实现了\app\exception\CustomExceptionInterface接口，接口中定义了showMsg()方法，可以将异常信息以json格式返回给前端。同时，report()方法可以将异常信息记录到日志。

  1. 在\app\exception\Handler类中重写\think\exception\Handle类中的render()方法，处理自定义异常，例如：

  <?php 
  namespace app\exception;
  
  use think\exception\Handle;
  
  /**
   * 异常处理类
   */
  class Handler extends Handle
  {
      /**
       * 自定义异常接管
       * @param Exception $e 异常
       * @return \think\Response|\think\response\Json|\think\response\Jsonp|\think\response\Xml
       */
      public function render(\Exception $e)
      {
          if ($e instanceof ApiException) {
              return $e->showMsg();
          }
  
          // 如果不是api异常，则使用默认的异常处理方式
          return parent::render($e);
      }
  }
  

  在重写render()方法时，先判断异常是否为自定义异常ApiException，如果是，则调用showMsg()方法将异常信息以json格式返回给前端，如果不是自定义异常，则按照默认的方式处理。

  1. 在\app\config\app.php中设置异常处理机制，将自定义Handler类作为异常处理类，例如：

  <?php
  // 异常处理类
  'exception_handle'       => '\\app\\exception\\Handler',
  

  最后，如果需要返回的异常信息中包含跨域的问题，请确保在对应的Controller中设置跨域头，例如：

  public function index()
  {
      header("Access-Control-Allow-Origin: *");
      // ...
  }
  

  至此，在vue+thinkphp6中显示接口错误信息的问题就解决了。当然，如果你不喜欢自定义异常处理机制，也可以像参考资料中提供的其他方法一样，选取合适的方案进行处理。