Webpack Dev Server代理Flask后端出现连接拒绝问题求助

1. 修正Webpack代理配置结构 #

你的当前配置存在格式错误，secure 属性应该放在具体的代理规则对象内部，而非 proxy 根层级。同时建议添加 changeOrigin 选项（解决跨域Origin校验问题），修正后的配置如下：

devServer: { 
    static: './static/dist',
    proxy: {
        '/': {
            target: 'http://localhost:5000',
            secure: false,
            changeOrigin: true,
            // 如果不需要WebSocket代理，可添加 ws: false 避免额外连接尝试
            ws: false
        }
    }
},

2. 确认Flask服务器的绑定地址 #

Flask默认仅绑定 127.0.0.1，虽然通常和 localhost 等效，但部分环境下可能出现解析问题。确保Flask启动时绑定 0.0.0.0 以允许所有本地请求访问：

• 命令行启动：

flask run --host=0.0.0.0 --port=5000

• 代码中直接设置：

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000, debug=True)

3. 验证端口占用与Flask运行状态 #

• 确认5000端口未被其他程序占用：

  # Windows
  netstat -ano | findstr :5000
  # macOS/Linux
  lsof -i :5000
  

  如果有其他进程占用该端口，终止进程或修改Flask的运行端口。
• 再次测试直接访问Flask API（如http://localhost:5000/all_users），确认服务正常响应。

4. 测试代理效果 #

重启Webpack Dev Server后，在浏览器访问http://localhost:8080/all_users，查看浏览器控制台的Network面板：

• 确认请求地址是localhost:8080/all_users
• 检查响应是否来自Flask服务器

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