DOMException：无法在“XMLHttpRequest”上执行“打开”：React 应用程序中的 URL 无效

Question

我正面临一个神秘的错误。当我尝试向服务器发送一个特定查询时，我收到以下错误

DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL
at dispatchXhrRequest (http://localhost:6789/static/js/20.chunk.js:180790:13)
at new Promise (<anonymous>)
at xhrAdapter (http://localhost:6789/static/js/20.chunk.js:180773:10)
at dispatchRequest (http://localhost:6789/static/js/20.chunk.js:181396:10)

在这里我记录了实际的 url 字符串

http://localhost:3000​/users​/5​/payments​/disconnect

如果我发送相同的查询但从我的主机到开发服务器，我会看到错误 404 和这样的 url

https://example.com/users%E2%80%8B/5%E2%80%8B/payments%E2%80%8B/disconnect

这是我发送查询的函数

  const query = `${url}​/users​/${userId}​/payments​/disconnect`;

  console.debug('Url', query);

  try {
    const { status } = await axios.delete(query);
    return status;
  } catch (e) {
    console.debug(e);
    return 500;
  }
}

有趣的是，所有其他端点都可以正常工作。在 chrome 和 firefox 上的行为相同。

什么会导致这样的问题？

Answer 1

%E2%80%8B 是一个 U+200B : ZERO WIDTH SPACE，你设法用它污染了你的字符串。

如果您将const query = `${url}​/users​/${userId}​/payments​/disconnect`; 行复制/粘贴到this app，您可以在源代码中看到它们。

通过像这样编辑该行可能最容易删除它：

1. 将光标定位在字符之后/之后
2. 按Backspace直到删除/之前的字符
3. 重新键入所需的三个字符