调用axios发起POST请求时查询字符串中+号被转为空格如何解决？

问题原因 #

1. 根据application/x-www-form-urlencoded编码规范，URL查询参数中的+符号会在解码时被默认替换为空格。如果需要传递字面量含义的+，必须提前将其编码为%2B。
2. 你使用的HTTP请求库（示例代码为Axios）默认的参数序列化逻辑不会对+做特殊编码处理，导致token中的+直接出现在查询字符串中，后端按照规范解码时就会被转换为空格。
3. OPTIONS和POST请求表现不一致的核心原因是后端对两类请求的参数解析逻辑不同：OPTIONS请求采用了标准的x-www-form-urlencoded规则解析查询参数，+被正常转译为空格；POST请求大概率是直接从原始URL中切割提取token，未经过标准解码流程，所以保留了原始的+符号。

解决方案 #

可根据实际场景选择以下任意一种方案修复：

• 方案1：手动编码特殊字符
  用encodeURIComponent包裹token值，自动转义+等特殊字符：

  instance.post('/Handler.ashx', {
    email
  }, {
    params: {
      action: 'QueryUser',
      token: encodeURIComponent('KALYh+KnLmH2vpn8ewOfQ3le3zmFr3Jo0jiIOID9fM1%2FCUBV1ULKc4Scq7Io0yA1')
    }
  })
  

• 方案2：配置请求库序列化规则
  给请求库配置符合标准的参数序列化逻辑，比如Axios可以搭配qs库自动处理所有参数的编码：

  import qs from 'qs'
  instance.post('/Handler.ashx', {
    email
  }, {
    params: {
      action: 'QueryUser',
      token: 'KALYh+KnLmH2vpn8ewOfQ3le3zmFr3Jo0jiIOID9fM1%2FCUBV1ULKc4Scq7Io0yA1'
    },
    // 配置序列化规则，自动转义特殊字符
    paramsSerializer: params => qs.stringify(params)
  })
  

• 方案3：修改参数传递位置
  把token从查询参数移到请求头（比如Authorization请求头）中传递，完全规避URL编码带来的问题。
• 方案4：后端统一兼容处理（不推荐）
  后端统一所有请求的参数解析逻辑，统一使用标准URL解码规则处理参数，或对获取到的token中的空格反向替换为+，但该方案容易留下隐性兼容问题，优先推荐前端做标准化编码处理。

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