前端传值中带有|{}[],%特殊符号，接口报400的问题记录

刘567

已于 2023-03-15 09:51:42 修改

阅读量1.5k

点赞数 2

文章标签： tomcat ajax javascript java spring boot Powered by 金山文档

于 2023-02-03 15:36:09 首次发布

本文链接：https://blog.csdn.net/liujg1994/article/details/128867612

版权

文章讲述了在Tomcat7以上版本遇到的请求问题，提出了解决方案，包括前端对特殊字符转义，创建请求拦截器处理，后端使用URLDecoder解码，以及修改Tomcat的server.xml配置来允许更多特殊字符。还提到了降级Tomcat作为直接解决办法。

摘要由CSDN通过智能技术生成

这个问题发生在7版本以上的tomcat，一般升级tomcat之后会发生这种问题，解决思路有这么几种：

前端在请求之前将这些符号转义一下，这里放的是若依的请求统一处理，推荐用这一种

/**
* 参数处理
* @param {*} params  参数
*/
export function tansParams(params) {
  let result = ''
  for (const propName of Object.keys(params)) {
    const value = params[propName];
    var part = encodeURIComponent(propName) + "=";
    if (value !== null && value !== "" && typeof (value) !== "undefined") {
      if (typeof value === 'object') {
        for (const key of Object.keys(value)) {
          if (value[key] !== null && value[key] !== "" && typeof (value[key]) !== 'undefined') {
            let params = propName + '[' + key + ']';
            var subPart = encodeURIComponent(params) + "=";
            result += subPart + encodeURIComponent(value[key]) + "&";
          }
        }
      } else {
        result += part + encodeURIComponent(value) + "&";
      }
    }
  }
  return result
}

创建拦截器，统一拦截处理

// request拦截器
service.interceptors.request.use(config => {
  // 是否需要设置 token
  const isToken = (config.headers || {}).isToken === false
  // 是否需要防止数据重复提交
  const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
  if (getToken() && !isToken) {
    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  // get请求映射params参数
  if (config.method === 'get' && config.params) {
    let url = config.url + '?' + tansParams(config.params);
    url = url.slice(0, -1);
    config.params = {};
    config.url = url;
  }
  if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
    const requestObj = {
      url: config.url,
      data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
      time: new Date().getTime()
    }
    const sessionObj = cache.session.getJSON('sessionObj')
    if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
      cache.session.setJSON('sessionObj', requestObj)
    } else {
      const s_url = sessionObj.url;                  // 请求地址
      const s_data = sessionObj.data;                // 请求数据
      const s_time = sessionObj.time;                // 请求时间
      const interval = 1000;                         // 间隔时间(ms)，小于此时间视为重复提交
      if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
        const message = '数据正在处理，请勿重复提交';
        console.warn(`[${s_url}]: ` + message)
        return Promise.reject(new Error(message))
      } else {
        cache.session.setJSON('sessionObj', requestObj)
      }
    }
  }
  return config
}, error => {
    console.log(error)
    Promise.reject(error)
})

后端可以用

java.net.URLDecoder.decode(str, Constants.UTF8)  //进行解码操作

修改tomcat配置

tomcat 下的文件夹conf 里面的server.xml文件打开

<Connector port="8086" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443" relaxedPathChars="|{}[],%" relaxedQueryChars="|{}[],%"/>

relaxedPathChars="|{}[],%" relaxedQueryChars="|{}[],%"

这个标签后面加上这个配置，重启就OK了