Laravel JSON Resource触发Malformed UTF-8编码错误跨浏览器兼容问题求解

问题触发原因 #

• 浏览器请求编码差异：Chrome、Firefox发送含非ASCII字符（比如西语重音字符、中文）的筛选/搜索参数时，若前端Vue组件未显式指定请求编码为UTF-8，会默认使用ISO-8859-1或操作系统本地编码传参，Edge的默认编码处理逻辑与前两者不同，默认以UTF-8编码传参，因此后端不会接收到乱码参数，也不会触发后续编码错误。
• 存储层编码不统一：你的数据库、数据表或字符串字段的编码未使用UTF8mb4，存储的西语特殊字符（如á、é、ñ等）取出时为Latin1编码，Laravel生成JSON响应时要求所有字符串必须为合法UTF-8编码，因此抛出异常。Edge触发筛选时查询到的记录刚好不含这类特殊字符，Chrome、Firefox的查询结果包含对应字符，因此仅前两者报错。
• 可选排查点：Resource中使用的diffForHumans()若启用了西语本地化，若语言包编码异常也可能生成非UTF-8字符，该场景概率较低。

修复方案 #

前端修复 #

在Vue组件的全局请求配置中显式指定请求头，统一编码规则，消除浏览器差异：

// 以axios为例
axios.defaults.headers.common['Content-Type'] = 'application/json;charset=utf-8';
// 所有请求参数传递前确认已转为UTF-8编码

后端修复 #

1. 统一存储编码：确认数据库、数据表、所有字符串字段的编码为utf8mb4，排序规则使用utf8mb4_unicode_ci，从根源保证存储的字符都是合法UTF-8编码。
2. 编码兜底处理：在Resource中对所有字符串字段做UTF-8编码转换兜底，避免偶发的编码异常：

// 示例处理，所有字符串字段都按该规则处理
'sales_man' => ($this->user_id != null ? mb_convert_encoding($this->user->name, 'UTF-8', 'auto') : null),
'type_activity' => ($this->last_activity ? mb_convert_encoding(ActivityType::find($this->last_activity->activity_type_id)->name, 'UTF-8', 'auto') : null),
// 其余字符串字段依次添加转换逻辑

3. JSON响应容错配置：控制器返回响应时添加JSON编码容错参数，无效UTF-8字符会被自动替换而不抛出异常：

return response()->json(
    OpportunitiesWithFiles::collection($documents),
    200,
    [],
    JSON_UNESCAPED_UNICODE | JSON_INVALID_UTF8_SUBSTITUTE
);

排查验证 #

可在控制器中临时添加以下代码，确认是否为编码问题：

$responseData = OpportunitiesWithFiles::collection($documents);
dd(mb_detect_encoding(json_encode($responseData), 'UTF-8', true));
// 若返回false则可确认存在非UTF-8字符，可逐个字段打印排查问题字段

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