url请求参数带有特殊字符“%、#、&”时，参数被截断怎么办？

HED2024-02-06 14:32

是的，最近又踩坑了！

事情是这样的，我们测试小姐姐在一个全局搜索框里输入了一串特殊字符"%%%"，然后进行搜索，结果报错了。而输入常规字符，均可以正常搜索。

一排查，发现特殊字符"%%%"并未成功传给后端。

我们的这个全局搜索功能是需要跳转页面才能查看到搜索结果的。所以，搜索条件是作为参数拼接在页面url上的。

正常的传参：

当输入的是特殊字符"%、#、&"时，参数丢失

也就是说，当路由请求参数带有浏览器url中的特殊含义字符时，参数会被截断，无法正常获取参数。

那么怎么解决这个问题呢？

方案一：encodeURIComponent/decodeURIComponent

拼接参数时，利用encodeURIComponent()进行编码，接收参数时，利用decodeURIComponent()进行解码。

js 复制代码

// 编码
this.$router.push({path: `/crm/global-search/search-result?type=${selectValue}&text=${encodeURIComponent(searchValue)}`});

// 解码
 const text = decodeURIComponent(this.$route.query.text)

此方法对绝大多数特殊字符都适用，但是唯独输入"%"进行搜索时不行，报错如下。

所以在编码之前，还需进行一下如下转换：

js 复制代码

this.$router.push({path: `/crm/global-search/search-result?type=${selectValue}&text=${encodeURIComponent(encodeSpecialChar(searchValue))}`});


/**
 * @param {*} char 字符串
 * @returns
 */
export const encodeSpecialChar = (char) => {
  // #、&可以不用参与处理
  const encodeArr = [{
    code: '%',
    encode: '%25'
  },{
    code: '#',
    encode: '%23'
  }, {
    code: '&',
    encode: '%26'
  },]
  return char.replace(/[%?#&=]/g, ($) => {
    for (const k of encodeArr) {
      if (k.code === $) {
        return k.encode
      }
    }
  })
}

方案二： qs.stringify()

默认情况下，qs.stringify()方法会使用encodeURIComponent方法对特殊字符进行编码，以保证URL的合法性。

js 复制代码

const qs = require('qs');

const searchObj = {
  type: selectValue,
  text: searchValue
};
this.$router.push({path: `/crm/global-search/search-result?${qs.stringify(searchObj)}`});

使用了qs.stringify()方法，就无需使用encodeSpecialChar方法进行转换了。