JavaScript中如何完整将URL转为字符串 避免参数被解析为对象属性

问题根因 #

URL被拆解为对象的核心原因是前端axios传参逻辑错误：
axios默认规则下，如果直接传入字符串作为请求体参数，会自动将请求头Content-Type设置为application/x-www-form-urlencoded，同时将字符串按照URL查询参数规则解析为键值对对象。你传递的完整URL中?alt=media&token=xxx会被拆分为两组键值对：

• 键：https://firebasestorage.googleapis.com/.../sample.jpeg?alt，值：media
• 键：token，值：474da151-d6...
  后续你直接对解析后的对象执行JSON.stringify，自然会得到带大括号、键值对格式的错误字符串，和Firebase返回的原始URL没有关系。

最优解决方案（修改前端传参逻辑） #

不要直接将URL字符串作为请求体传递，将其封装在对象的指定字段中传输即可：
前端代码修改示例：

console.log("url: ",url)
// 将URL存入对象字段，字段名可根据业务自定义，比如avatarUrl、coverUrl等
await axios.put(`/api/users/${id}`, { avatarUrl: url }).then...

后端直接读取对应字段即可拿到原始完整URL字符串，不需要任何额外转换：

case 'PUT':
    try {
        // req.body.avatarUrl就是完整的原始URL字符串，可直接存入MongoDB
        const stringUrl = req.body.avatarUrl

临时兼容方案（不修改前端，后端拼接还原） #

如果暂时无法调整前端代码，可以直接从解析后的对象中拼接还原URL，不需要使用JSON.stringify加字符串替换的hack方案：

// 取出对象第一组键值对，对应URL前缀和media参数值
const [urlPrefix, mediaVal] = Object.entries(req.body)[0]
// 取出token参数值
const tokenVal = req.body.token
// 拼接为完整URL
const fullUrl = `${urlPrefix}=${mediaVal}&token=${tokenVal}`

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