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

Question

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

\n\n

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

\n\n

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

\n\n

http://localhost:3000\xe2\x80\x8b/users\xe2\x80\x8b/5\xe2\x80\x8b/payments\xe2\x80\x8b/disconnect\n

\n\n

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

\n\n

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

\n\n

这是我发送查询的函数

\n\n

  const query = `${url}\xe2\x80\x8b/users\xe2\x80\x8b/${userId}\xe2\x80\x8b/payments\xe2\x80\x8b/disconnect`;\n\n  console.debug('Url', query);\n\n  try {\n    const { status } = await axios.delete(query);\n    return status;\n  } catch (e) {\n    console.debug(e);\n    return 500;\n  }\n}\n

\n\n

有趣的是，所有其他端点都工作正常。Chrome 和 Firefox 上的行为相同。

\n\n

什么会导致这样的问题？

\n

Answer 1

%E2%80%8B是一个U+200B ：零宽度空间，您已经以某种方式设法污染了您的字符串。

\n\n

const query = `${url}\xe2\x80\x8b/users\xe2\x80\x8b/${userId}\xe2\x80\x8b/payments\xe2\x80\x8b/disconnect`;如果您将该行复制/粘贴到此应用程序中，您可以在源代码中看到它们。

\n\n

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

\n\n

\n
1. 将光标定位在 后面的字符后面/
\n
2. 按直至删除前面的Backspace字符/
\n
3. 重新输入您想要的三个字符
\n

\n