Motoko项目使用webpack-dev-server遭遇ECONNREFUSED错误排查与解决

我基于Motoko开发后端服务，前端使用JavaScript+HTML实现，计划通过Webpack部署项目。部署完成后，前端与后端交互时触发如下错误：

[webpack-dev-server] [HPM] Error occurred while proxying request localhost:8080/api/v2/status to http://localhost:8000/ [ECONNREFUSED]

根据官方文档，前端应运行在http://localhost:8080，所有API请求会被代理到8000端口的replica服务。但直接访问http://localhost:8000时，页面显示：

Could not find a canister id to forward to.

我判断前端服务器已正常启动，但API调用代理到8000端口时，目标端口的服务未响应。我的webpack.config.js代理配置如下：

// proxy /api to port 8000 during development
devServer: {
  proxy: {
    "/api": {
      target: "http://localhost:8000",
      changeOrigin: true,
      pathRewrite: {
        "^/api": "/api",
      },
    },
  },
  hot: true,
  watchFiles: [path.resolve(__dirname, "src", frontendDirectory)],
  liveReload: true,
},
};

解决方法 #

修改webpack.config.js中的代理目标地址，将target: "http://localhost:8000"替换为target: "http://127.0.0.1:8000/"后，API请求可以正常路由，问题解决。

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