Axios 0.21.1版本请求不保留URL中编码的句号，如何解决？

问题原因 #

Axios 0.21.x版本的内部URL标准化逻辑，会默认对路径中的百分号编码序列做解码处理，将可安全打印的ASCII字符（比如%2E对应英文句号）解码为原始字符，因此会把你主动编码的%2E还原为.，触发后端的格式校验报错。

解决方案 #

方案1：URL二次编码（侵入性最低，推荐） #

在传入URL给Axios前，对URL中所有已编码的百分号做一次额外编码，Axios内部自动解码一次后正好还原为你需要的原始编码内容：

post(rawUrl) {
  // 将所有%编码为%25，抵消Axios的自动解码逻辑
  const processedUrl = rawUrl.replace(/%/g, '%25')
  return axios.post(
    processedUrl, 
    {},
    {responseType: 'json', headers: { 'Content-Encoding': 'gzip' }}
  )
}

方案2：重写Axios URL处理逻辑（适合全局统一处理场景） #

如果项目中大量存在这类已预编码的URL，可以全局修改Axios的URL处理规则，跳过自动解码步骤：

import axios from 'axios'

// 全局保留原始URL的编码状态，不做自动解码
const originalNormalize = axios.getUri;
axios.getUri = function(config) {
  const uri = originalNormalize.call(this, config);
  // 把被Axios解码的特定.还原为%2E，可根据业务调整正则匹配规则
  return uri.replace(/Vol\.\s/g, 'Vol%2E%20');
};

方案3：升级Axios版本（无兼容问题时可选择） #

Axios从0.22.0版本开始新增了encodePath配置项，设置为false即可关闭路径的自动编码解码逻辑：

post(url) {
  return axios.post(
    url, 
    {},
    {
      responseType: 'json', 
      headers: { 'Content-Encoding': 'gzip' },
      encodePath: false // 0.22.0+版本支持
    }
  )
}

内容的提问来源于stack exchange，提问作者Tom Talbott