NextJS服务端Fetch报错：TypeError: Failed to parse URL

问题详情 #

在Next.js开发模式下的API端点中尝试请求其他资源时，触发ERR_INVALID_URL错误，具体报错信息如下：

error - TypeError: Failed to parse URL from httр://localhost:3000/api/test
    at Object.fetch (node:internal/deps/undici/undici:14152:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async handler (webpack-internal:///(api)/./src/pages/api/checkout.js:8:20)
    at async Object.apiResolver (XXX\node_modules\next\dist\server\api-utils\node.js:372:9)
    at async DevServer.runApi (XXX\node_modules\next\dist\server\next-server.js:514:9)
    ... 5 lines matching cause stack trace ...
    at async XXX\node_modules\next\dist\server\base-server.js:157:99 {
  page: '/api/checkout',
  [cause]: TypeError [ERR_INVALID_URL]: Invalid URL
      at new NodeError (node:internal/errors:399:5)
      at URL.onParseError (node:internal/url:565:9)
      at new URL (node:internal/url:645:5)
      at new Request (node:internal/deps/undici/undici:6947:25)
      at fetch2 (node:internal/deps/undici/undici:13315:25)
      at Object.fetch (node:internal/deps/undici/undici:14150:18)
      at fetch (node:internal/process/pre_execution:241:25)
      at infoAPI (webpack-internal:///(api)/./src/modules/reporting/api/infoAPI.js:17:12)
      at handler (webpack-internal:///(api)/./src/pages/api/checkout.js:8:100)
      at Object.apiResolver (XXX\node_modules\next\dist\server\api-utils\node.js:372:15)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async DevServer.runApi (XXX\node_modules\next\dist\server\next-server.js:514:9)
      at async Object.fn (XXX\node_modules\next\dist\server\next-server.js:828:35)
      at async Router.execute (XXX\node_modules\next\dist\server\router.js:243:32)
      at async DevServer.runImpl (XXX\node_modules\next\dist\server\base-server.js:432:29)
      at async DevServer.run (XXX\node_modules\next\dist\server\dev\next-dev-server.js:831:20)
      at async DevServer.handleRequestImpl (XXX\node_modules\next\dist\server\base-server.js:375:20)
      at async XXX\node_modules\next\dist\server\base-server.js:157:99 {
    input: 'httр://localhost:3000/api/test',
    code: 'ERR_INVALID_URL'
  }
}

对应的/src/pages/api/checkout.js代码：

async function infoAPI() {
  return fetch('httр://localhost:3000/api/test');
}

export default async function handler(req, res) {
  const result = await infoAPI();

  //...

  res.status(200).json({ message: 'success', data: result });
}

注：httр://localhost:3000/api/test仅为示例，无论填写本地还是外部URL，均会触发相同错误。

补充测试：改用http.get请求也出现完全一致的错误：

error - TypeError [ERR_INVALID_URL]: Invalid URL
    at new NodeError (node:internal/errors:399:5)
    at URL.onParseError (node:internal/url:565:9)
    at new URL (node:internal/url:645:5)
    at new ClientRequest (node:_http_client:134:30)
    at request (node:http:97:10)
    at Object.get (node:http:108:15)
    at result (webpack-internal:///(api)/./src/pages/api/checkout.js:15:53)
    ... 
{
  input: 'httр://localhost:3000/api/test',
  code: 'ERR_INVALID_URL',
  page: '/api/checkout'
}

运行环境：Next.js v13.2.4、Node.js v19.4.0（Windows 10）

问题原因与解决方案 #

原因 #

你URL中的httр://里的字母p不是英文半角的p，而是西里尔字母р（Unicode编码U+0440），Node.js的URL解析器无法识别这种非标准字符，因此判定URL无效。

解决方法 #

将URL中的httр://替换为标准的http://（确保是英文半角的p），重新运行项目后，请求即可正常解析。

验证方式 #

可以把URL字符串复制到字符编码查看工具，就能看到这个异常字符的编码，确认是西里尔字母而非英文p。

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