时间戳

首页 > 解决方案 > DOMException：无法在“XMLHttpRequest”上执行“打开”：React 应用程序中的 URL 无效

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

问题描述

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

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 上的行为相同。

什么会导致这样的问题？

标签： reactjsrestaxiosnestjs

解决方案

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

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

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

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

推荐阅读