axios get 请求 url 转码 空格转成+，导致请求失败（前端解决）

问题

GET 请求参数： 

URL-encoded 后： 

 浏览器将空格转成了+，导致服务报错，返回 400。

解决

在请求拦截器中，对 params 进行处理。

axios.interceptors.request.use((config) => {
    let url = config.url;
    if (config.method === "get" && config.params) {
      url += "?"; // 拼接参数
      // 获取所有参数，通过循环 拼接所有参数，encodeURIComponent对参数编码，
      Object.keys(config.params).map((key) => {
        url += `${key}=${encodeURIComponent(config.params[key])}&`;
      });
      url = url.substring(0, url.length - 1); // 删除最后一个&字符
      config.params = {}; // 参数已经存在于 url中
    }
    config.url = url;
    return config;
  });

URL中的空格有时候被编码成%20，有时候被编码成加号+。

W3C标准规定，当Content-Type为application/x-www-form-urlencoded时，URL中查询参数名和参数值中空格要用加号+替代，所以几乎所有使用该规范的浏览器在表单提交后，URL查询参数中空格都会被编成加号+。

而在另一份规范(RFC 2396，定义URI)里, URI里的保留字符都需转义成%HH格式(Section 3.4 Query Component)，因此空格会被编码成%20，加号+本身也作为保留字而被编成%2B，对于某些遵循RFC 2396标准的应用来说，它可能不接受查询字符串中出现加号+，认为它是非法字符。所以一个安全的举措是URL中统一使用%20来编码空格字符。