热模块替换后出现间歇性ECONNREFUSED错误求助

我同时在webpack dev server上运行React应用，以及独立的Express JS服务器（未依托webpack），已启用Hot Module Replacement（热模块替换）。React应用在页面首次加载时会发起API请求。

首次加载时一切正常，但修改React代码触发模块替换后，会出现如下错误，刷新页面后恢复正常。请问可能的问题是什么？以下是Webpack Dev Server配置及React代码，如需其他信息请告知。

错误信息 #

[webpack-dev-server] [HPM] Error occurred while proxying request localhost:8080/api/link/token/create to http://localhost:3000/ [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors)

Webpack Dev Server配置 #

devServer: {
    port: 8080,
    hot: true,
    proxy: { '/api': 'http://localhost:3000' }
}

React应用代码 #

function PlaidLink({ linkToken }){
    const onSuccess = React.useCallback(async (public_token, metadata) => {
        try{
            let response = await fetch('/api/item/public_token/exchange', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ public_token })
                }),
                data = await response.json();

        } catch(error){}
    }, []);
    const config = {
        token: linkToken,
        onSuccess
    };
    const { open, ready } = usePlaidLink(config);

    return (
        <button onClick={open} disabled={!ready}>Link bank account</button>
    );
}

function LinkBankAccountButton(){
    var [linkToken, setLinkToken] = useState(null);

    const createLinkToken = async () => {
        try{
            let response = await fetch('/api/link/token/create', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({})
                }),
                data = await response.json();

            setLinkToken(data.link_token);
        } catch(error){}
    };

    useEffect(() => {
        createLinkToken();
    }, []);

    return linkToken != null ? <PlaidLink linkToken={linkToken}/> : null;
}

createRoot(document.getElementById('app')).render(<LinkBankAccountButton/>);

• 代理连接在HMR后重置失效：Webpack Dev Server的HMR触发时，可能会重置代理内部的连接池，导致后续请求无法正常连接到Express服务器。可以在代理配置中补充参数，确保请求头部和跨域设置正确：

  proxy: {
    '/api': {
      target: 'http://localhost:3000',
      changeOrigin: true,
      secure: false
    }
  }
  

• Express服务器短暂不可用：虽然首次加载正常，但HMR触发时可能因资源占用、临时重启等原因，导致Express服务器短暂断开。检查Express服务器日志，确认是否在HMR过程中有异常重启或端口占用情况，保证服务器稳定运行。

• HMR重渲染时请求时机不当：组件中useEffect依赖为空数组，首次加载执行请求，但HMR触发后组件重渲染，可能因代理未完成重新初始化就发起请求，导致连接被拒。可以尝试给useEffect添加一个HMR相关的依赖标记，或者在请求前增加短暂延迟，确保代理连接就绪。

• Webpack Dev Server版本兼容问题：部分版本的Webpack Dev Server在HMR与代理结合使用时存在bug，尝试升级或降级到webpack-dev-server@4.x系列的稳定版本，解决已知的兼容问题。

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