Vue向Laravel GraphQL Mutation传参JSON解析失败问题咨询

我尝试从Vue.js向Laravel的GraphQL Mutation传递数据，手动拼接parametrosCorreo的JSON字符串：

parametrosCorreo: '{ "para":"' + destinatariosListaFmt.para.replace(/ /g, "")
   + '", "cc":"' + destinatariosListaFmt.cc.replace(/ /g, "")
   + '", "cco":"' + destinatariosListaFmt.cco.replace(/ /g, "")
   + '", "aplicacion": "SIFCO"
   + ', "replyTo": {"email": "liquidaciones.gas@cnmc.es", "name": "Grupo Gas (Liquid)"}' 
   + ', "anexarComoFichero": ' + this.anexarComoFichero 
   + ', "incrustarEnCuerpo": ' + this.incrustarEnCuerpo
   + ', "texto": "'+ encodeURIComponent(this.mensaje)
   + '", "adjunto": '+ JSON.stringify(this.ficheroError)
   + ', "usuario": ' + JSON.stringify(this.usuario) 
   +' }'

后端通过如下方法接收并解析参数：

public function enviarMailDeTareaConParametros($root, array $args, $context)
{
    $parametros = json_decode($args['parametrosCorreo'], true);
}

但出现错误：

Error: Network error: Unexpected token 's', "string(422"... is not valid JSON

网络请求中的JSON内容示例：

string(422) "{ "para":"", "cc":"", "cco":"", "aplicacion": "", "replyTo": {"email": "", "name": ""}, "anexarComoFichero": true, "incrustarEnCuerpo": true, "texto": "Buenos%20d%C3%ADas.%20%0A%0AEl%20fichero%20ha%20entrado%20correctamente.%20%0A%0AUn%20saludo%2C, "adjunto": {"ruta":null,"numTrazas":0}, "usuario": }"

更新后的参数示例：

array(3) {
  ["tarea_id"]=>
  int(17560)
  ["usuario_id"]=>
  string(2) "80"
  ["parametrosCorreo"]=>
  string(421) "{ "para":"data,data", "cc":"", "cco":"data", "aplicacion": "data", "replyTo": {"email": "data", "name": "data"}, "anexarComoFichero": true, "incrustarEnCuerpo": true, "texto": "data", "adjunto": {"ruta":null,"numTrazas":0}, "usuario": data}"
}

核心错误点 #

• 手动拼接JSON的语法漏洞：从更新后的参数能看到"usuario": data}，这里data未加引号，破坏了JSON结构。手动拼接极易出现引号遗漏、逗号错位等问题，尤其当变量包含特殊字符（双引号、换行）时，直接会导致JSON失效。
• 错误的字符串编码：对this.mensaje使用encodeURIComponent会生成URL编码的字符串（比如%20代表空格），但JSON要求用原生转义格式（比如\n），这种URL编码会导致后端解析失败。
• 后端调试输出干扰：错误提示里的string(422)是PHPvar_dump的输出格式，说明后端调试时的打印内容混入了响应，导致前端收到的不是纯JSON。

修复方案 #

放弃手动拼接，直接用JSON.stringify生成合法JSON字符串，这是最稳妥的方式：

// 先构造普通JavaScript对象
const parametrosObj = {
  para: destinatariosListaFmt.para.replace(/ /g, ""),
  cc: destinatariosListaFmt.cc.replace(/ /g, ""),
  cco: destinatariosListaFmt.cco.replace(/ /g, ""),
  aplicacion: "SIFCO",
  replyTo: { 
    email: "liquidaciones.gas@cnmc.es", 
    name: "Grupo Gas (Liquid)" 
  },
  anexarComoFichero: this.anexarComoFichero,
  incrustarEnCuerpo: this.incrustarEnCuerpo,
  texto: this.mensaje, // 无需URL编码，JSON.stringify会自动处理转义
  adjunto: this.ficheroError,
  usuario: this.usuario
};

// 转换为标准JSON字符串
parametrosCorreo: JSON.stringify(parametrosObj)

后端补充处理：

• 移除所有var_dump/print_r等调试输出，确保响应是纯JSON格式。
• 可以添加JSON解析校验，方便排查问题：

public function enviarMailDeTareaConParametros($root, array $args, $context)
{
    $parametros = json_decode($args['parametrosCorreo'], true);
    if (json_last_error() !== JSON_ERROR_NONE) {
        throw new \Exception('JSON解析错误: ' . json_last_error_msg());
    }
    // 后续业务逻辑
}

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