[记录]访问 localhost 的 net::ERR_UNKNOWN_URL_SCHEME 问题

启动了一个 Node 服务,用来进行服务端渲染。在开发模式下,将 script 的 url 设置为另一个客户端编译服务上的地址,用来获取开发模式下编译后的 JavaScript 文件:

getRenderHTML(CLIENT_PORT){
  let scriptUrl = this.scriptUrl;
  if(CLIENT_PORT){
    scriptUrl = `localhost:${CLIENT_PORT}/dev-client-script.js`;
  }
  const htmlStr = `
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Charley SSR</title>
      <style>${this.styleStr}</style>
      <script>
        window.__INITIAL_STATE__ = ${this.initialStateStr}
      </script>
    </head>
    <body>
      <div id="root">${this.content}</div>
      <script src="${scriptUrl}"></script>
    </body>
    </html>
  `
  this.htmlStr = this.minifyHTML(htmlStr);
}

编译服务会将 /dev-client-script.js 的请求都转发到最新编译的文件上:

...
app.use("/dev-client-script.js", async (req, res)  => {
  const { records:{hash} } = clientCompiler;
  const clientOutputFileName = `bundle.${hash.substr(0,5)}.js`
  res.redirect(clientOutputFileName)
});
...

打开浏览器,出现了 net::ERR_UNKNOWN_URL_SCHEME 错误,无法访问到编译生成的 JavaScript 文件:

错误截图.png

解决方案是在 localhost 前面加上协议名:

getRenderHTML(CLIENT_PORT){
  let scriptUrl = this.scriptUrl;
  if(CLIENT_PORT){
    scriptUrl = `http://localhost:${CLIENT_PORT}/dev-client-script.js`;
  }
...
}

然后就 OK 了。


修复报错后的控制台.png

完。

推荐阅读更多精彩内容