前端传参中带有特殊符号导致后端接收时乱码或转码失败的解决方案-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端传参中带有特殊符号导致后端接收时乱码或转码失败的解决方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

bug背景

项目中采用富文本编辑器后传参引起的bug，起因如下：
前端传参转码,vue,项目中的开发思路,经验分享,spring cloud,vue,前端

数据库中存入的数据会变成这种未经转码的URL编码

前端传参转码,vue,项目中的开发思路,经验分享,spring cloud,vue,前端

解决思路1：

使用JSON方式传参，但富文本编辑器不支持将内容转成JSON，会遗失标签，显然不符合把富文本文章存入数据库的需求，所以PASS

解决思路2

使用URL拼接方式传参，而缺点也是明显的，URL拼接的参数长度有限，用户就不能编写长文本了。
且用此种方法，后端接收到的数据依旧会因特殊字符而转码失败（不知道是不是框架MVC配置的拦截器逻辑有问题，遇到特殊字符后就不去处理了），用URLDecoder.decode方法手动转码又过于不优雅，也不符合高可用的理念

前端传参转码,vue,项目中的开发思路,经验分享,spring cloud,vue,前端

解决思路3（最终解决方案）

前端使用URLSearchParams 对象以键值对方式传参
似乎是目前比较合适的解决方法

// 创建URLSearchParams对象，将参数用append方法以键值对一个个放入
const params = new URLSearchParams();
    params.append('key1', 'value1');
    params.append('key2', 'value2');

URLSearchParams 对象参考：【JS】URLSearchParams 对象（以对象的形式上传参数到url）
需要考虑各浏览器兼容性问题和解决方案

vue3前端请求方法：

const onSubmit = async function (formEl: FormInstance | undefined) {
  console.log(formEl)

  formEl.validate(async valid => {
    if (valid) {
      try {
        const params = new URLSearchParams()
        params.append('content.content', form.contentStr)
        params.append('destId', form.destId.toString())
        params.append('title', form.title)
        params.append('travelTime', form.travelTime)
        params.append('coverUrl', form.coverUrl)
        params.append('isPublic', form.isPublic ? '1' : '0')
        params.append('person', form.person)
        params.append('days', form.days)
        params.append('avgConsume', form.avgConsume)
        params.append('summary', form.summary)
        // let params = {
        //   destId: form.destId,
        //   title: form.title,
        //   travelTime: form.travelTime,
        //   coverUrl: form.coverUrl,
        //   isPublic: form.isPublic ? '1' : '0',
        //   person: form.person,
        //   days: form.days,
        //   avgConsume: form.avgConsume,
        //   summary: form.summary,
        //   contentStr: form.contentStr
        // }
        //params['content.content'] = params.contentStr
        const res = await travelsAdd(params)
        ElMessage.success('提交日志成功')
        router.push('/personal/travels')
      } catch (err) {
        console.log(err)
        ElMessage.error(err.msg)
      }
    } else {
      return false
    }
  })
}