如何在React的package.json中使用Docker Compose的Flask服务名配置代理

问题根源 #

你遇到的代理报错是两类常见配置错误导致的，对应你运行React的场景有不同的修复方案：

场景1：React应用跑在docker-compose的web容器中 #

此时两个服务同属Docker内部网络，可以直接解析server服务名，报错是因为端口配置错误：
Docker容器之间通信使用容器内部暴露的端口，不需要用宿主机的映射端口。你的server容器内部Flask服务跑在5000端口，你配置的80端口是宿主机的映射端口，仅供给宿主机访问使用。
修复方案：
把package.json中的代理配置修改为：

"proxy":"http://server:5000"

场景2：React应用在宿主机本地启动（没有用Docker运行React） #

此时你的本地操作系统无法识别Docker内部的server服务名，需要手动添加本地域名映射：

1. 编辑本地hosts文件：
   • Windows系统路径：C:\Windows\System32\drivers\etc\hosts
   • macOS/Linux系统路径：/etc/hosts
2. 在文件末尾添加一行记录：

   127.0.0.1 server
   

保存后生效，此时你原来的"proxy":"http://server:80"配置就可以正常工作。

额外检查项 #

确认你的Flask启动代码中监听地址是0.0.0.0，而不是127.0.0.1，否则容器外部（包括同Docker网络的其他容器）无法访问Flask服务，示例启动代码：

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

另外你当前前端代码请求头里加的Access-Control-Allow-Origin是服务端返回的响应头，前端请求侧添加是无效的，后续如果遇到跨域问题可以单独配置Flask的CORS组件，该配置不影响当前代理问题的修复。

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