Axios GET传带特殊符号参数返回Promise rejected 400错误

报错是因为你手动拼接GET请求参数时，没有对参数里的特殊字符做URL编码。
URL规范里&、#、空格、%等字符有特殊作用：比如&是参数之间的分隔符，你参数值里带的&会被后端当成两个参数的分割标记，直接把参数值切乱；#后面的内容会被识别为页面锚点，根本不会传给后端；其余特殊字符不编码的话后端无法按规则解析，就会返回400参数校验失败的错误。
你可以对比成功请求的日志：正常请求里的空格被自动转成了%20，而你手动拼接的异常请求URL里所有特殊字符都是原样拼接，参数结构直接被破坏了。

优先用Axios原生的params配置传参，Axios会自动对所有参数值做合规的URL编码，完全不用手动处理特殊字符，改完的代码如下：

export function getBranchDetail(companyName, branchName) {  
  return axios.get(GET_BRANCH_DETAIL_URL, {
    params: {
      companyName,
      branchName
    }
  });
}

如果场景要求必须手动拼接URL，要对每一个参数值单独调用encodeURIComponent转义，不能直接拼原始值：

export function getBranchDetail(companyName, branchName) {  
  const requestUrl = `${GET_BRANCH_DETAIL_URL}?companyName=${encodeURIComponent(companyName)}&branchName=${encodeURIComponent(branchName)}`;
  return axios.get(requestUrl);
}

注意：不要用encodeURI转义整个拼接好的URL，这个方法不会转义&、#这类URL保留字符，达不到参数编码的效果，必须用encodeURIComponent处理单个参数值。

改完之后再发起请求，看控制台里的请求URL，所有特殊字符都会被转成%加十六进制编码的格式，后端能正确拿到完整的参数值，就不会再出现rejected的400报错了。

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