Symfony 5+VueJS+Axios自定义错误消息传递问题

在Symfony服务中，当收件人数量为0时会抛出携带自定义消息的TransportException：

if (count($recipients) === 0) {
    throw new TransportException($this->carrierService::ERROR_NO_MAIL_ADDRESSES);
}

其中carrierService::ERROR_NO_MAIL_ADDRESSES对应消息'No email addresses are available'。

控制器捕获该异常后返回JsonResponse，但Vue项目中Axios请求的错误回调里，只能拿到状态文本（如"Bad Gateway"），自定义错误消息无法获取；尝试返回['error' => 'ErrorMessage']时，前端error.data始终为undefined。需要实现将后端自定义错误消息传递到Axios错误回调，让前端显示自定义内容而非默认状态文本。

1. 控制器正确返回错误JSON响应 #

捕获异常时，需指定正确的HTTP状态码（如400 Bad Request），确保响应为标准JSON格式，避免被Symfony默认处理覆盖：

use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\Mailer\Exception\TransportException;

// 控制器方法内
try {
    $this->mailService->send($recipients);
} catch (TransportException $e) {
    return new JsonResponse(
        ['error' => $e->getMessage()],
        JsonResponse::HTTP_BAD_REQUEST // 根据业务场景选择合适状态码，如422
    );
}

2. 配置Symfony异常处理器（避免默认覆盖） #

若项目启用了Symfony默认异常控制器，可能会自动将异常转为HTML或通用JSON响应，需自定义异常处理确保API路由返回自定义错误：

1. 修改config/packages/framework.yaml配置：

framework:
    error_controller: App\Controller\CustomErrorController::handle

2. 创建CustomErrorController：

namespace App\Controller;

use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpKernel\Exception\HttpExceptionInterface;
use Symfony\Component\HttpKernel\Log\DebugLoggerInterface;

class CustomErrorController
{
    public function handle($exception, DebugLoggerInterface $logger = null)
    {
        $statusCode = $exception instanceof HttpExceptionInterface 
            ? $exception->getStatusCode() 
            : JsonResponse::HTTP_INTERNAL_SERVER_ERROR;
            
        $message = $exception->getMessage() ?: 'An unknown error occurred';

        return new JsonResponse(
            ['error' => $message],
            $statusCode
        );
    }
}

3. 前端Axios正确读取错误响应 #

Axios的错误响应数据存储在error.response.data而非error.data，需调整前端代码：

axios.post('/api/send-mail', recipientsData)
    .then(res => {
        // 处理成功逻辑
    })
    .catch(error => {
        // 安全获取自定义错误消息，兼容无响应的情况
        const errorMsg = error.response?.data?.error || 'Request failed';
        // 展示错误给用户
        alert(errorMsg);
        console.error(errorMsg);
    });

4. 跨域场景下配置CORS #

若前后端跨域部署，需确保后端允许跨域请求携带响应数据，可使用nelmio/cors-bundle配置：

1. 安装依赖：

composer require nelmio/cors-bundle

2. 修改config/packages/nelmio_cors.yaml：

nelmio_cors:
    defaults:
        origin_regex: true
        allow_origin: ['%env(CORS_ALLOW_ORIGIN)%']
        allow_methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']
        allow_headers: ['Content-Type']
        expose_headers: ['Content-Type']
        max_age: 3600
    paths:
        '^/api/': ~

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