window.location.replace跳转异常：API返回URL被拼接至当前域名后是什么原因？

导致该现象的核心原因是你从接口拿到的URL字符串不是浏览器可识别的合法绝对URL格式，浏览器会自动将无法识别为绝对路径的URL当做相对路径，拼接在当前站点的基础URL之后。
常见的具体场景有2种：

• 场景1：接口返回的不是纯文本URL，而是JSON结构。比如接口实际返回的是{"code":0,"data":"http://example.com"}，你直接把完整JSON字符串当做URL使用，浏览器自然无法识别为绝对路径。
• 场景2：接口返回的纯文本URL前后存在多余字符，包括但不限于空格、换行符、双引号、零宽空格等不可见控制字符。比如实际拿到的字符串是"\n\"http://example.com\" "，多余的字符会导致浏览器判定其为相对路径。
  硬编码的URL能正常跳转，是因为硬编码的字符串是纯净的合法绝对URL格式，不存在多余字符或者结构问题。

你可以按以下步骤排查修复：

1. 先确认接口返回内容的真实格式，在跳转前加日志打印调试：

let u = xhr.responseText
// 新增调试日志，查看返回内容的完整信息
console.log('原始返回内容：', u)
console.log('返回内容长度：', u.length)
console.log('逐字符编码：', [...u].map(c => c.charCodeAt(0)))

2. 根据排查结果对应修复：
   • 如果是JSON格式返回：先解析JSON再提取URL字段

   // 示例：接口返回{"url":"http://example.com"}
   const res = JSON.parse(xhr.responseText)
   const u = res.url.trim()
   

   • 如果是纯文本带多余空白：先去除前后空白字符

   const u = xhr.responseText.trim()
   

3. 也可以通过URL构造函数做强制校验，避免非法URL被当做相对路径处理：

if (xhr.status === 200) {
  try {
    const targetUrl = new URL(xhr.responseText.trim())
    window.location.replace(targetUrl.href)
  } catch (e) {
    console.error('返回的URL不合法：', e)
  }
  return false
}

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