Create React App/CRACO配置Webpack Proxy遇504网关超时问题

以下是针对问题的可行解决方案，按优先级尝试：

1. 完善代理核心配置 #

你的代理配置缺少路径重写规则，且可能存在地址解析、超时时间过短的问题。修改craco.config.ts的代理部分：

export = {
    mode: 'development',
    devServer: {
        port: 3000,
        open: true,
        historyApiFallback: true,
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:8050', // 替换为127.0.0.1避免localhost解析优先级问题
                secure: false,
                changeOrigin: true,
                logLevel: "debug",
                headers: {
                    Connection: 'keep-alive'
                },
                pathRewrite: {'^/api': ''}, // 移除请求路径中的/api前缀，匹配Flask实际路由
                timeout: 10000 // 延长超时时间，避免请求未完成就被中断
            },
        },
    },
};

2. 验证代理转发逻辑 #

用curl测试代理是否正常工作，对比直接请求Flask的结果：

# 测试代理转发
curl http://localhost:3000/api/comp

# 测试直接访问Flask
curl http://localhost:8050/comp

如果两者返回结果不一致，说明路径重写或地址配置仍有问题。

3. 排查Flask debug模式冲突 #

Flask的debug=True模式会启用自动重载机制，可能导致代理连接不稳定。尝试关闭debug模式启动：

app.run(
    host="0.0.0.0",
    port=8050,
    debug=False,
)

4. 确认端口与网络状态 #

检查8050端口是否被其他进程占用：

# Windows系统
netstat -ano | findstr :8050

# macOS/Linux系统
lsof -i :8050

确保Flask确实监听在该端口，且本地防火墙未拦截请求。

关于硬编码CORS可行的原因 #

直接在React中硬编码localhost:8050是浏览器发起跨域请求，Flask的CORS配置允许了跨域访问；而代理是通过React开发服务器转发请求到Flask，问题出在代理的转发逻辑（路径、超时、地址解析），而非跨域本身。

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