WHATWG URL API在Node.js与浏览器中的行为差异及统一方案咨询

问题说明 #

执行 new URL('http://exa mple.com').origin 时，浏览器会自动编码空格并返回 http://exa%20mple.com，但Node.js会直接抛出 TypeError: Invalid URL。实际上浏览器的行为不符合WHATWG URL规范，包含未编码空格的URL属于非法格式。

标准解决方案：用URL.canParse()提前校验 #

WHATWG URL标准提供了URL.canParse()静态方法，专门用来判断字符串是否符合合法URL格式。这个方法在现代浏览器（Chrome 95+、Firefox 94+等）和Node.js 17+中都原生支持，是长期符合标准的方案。

代码示例：

const urlStr = 'http://exa mple.com';
if (URL.canParse(urlStr)) {
  const url = new URL(urlStr);
  console.log(url.origin);
} else {
  throw new TypeError('Invalid URL');
}

这段代码在浏览器里会和Node.js一样抛出非法URL的错误，实现行为统一。

旧浏览器降级方案（可选） #

如果需要兼容不支持URL.canParse()的旧浏览器，可以用try/catch配合简单的前置校验模拟严格逻辑：

const urlStr = 'http://exa mple.com';
let url;
try {
  // 检查是否存在未编码的空格
  if (urlStr.includes(' ')) {
    throw new Error();
  }
  url = new URL(urlStr);
  console.log(url.origin);
} catch (err) {
  throw new TypeError('Invalid URL');
}

不过优先推荐URL.canParse()，它是标准内置方法，能精准遵循规范进行校验。

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