Azure容器化Web应用中前端Axios请求后端容器的配置方案

环境与本地运行情况 #

• 容器化Web应用部署于Azure App Services，通过单个docker-compose.yml文件从Azure Container Registry拉取两个容器镜像启动：
  • React前端容器：通过端口80对外提供服务
  • Flask后端容器：使用gunicorn启动，命令为gunicorn -w 2 --bind 0.0.0.0:8000 app:app，通过端口8000提供服务
• 本地运行时，前端Axios请求的基准URL为http://localhost:8000，示例代码如下：

axios.get('http://localhost:8000/getSomething', { params: {foo: bar}});

本地运行符合预期，gunicorn启动日志显示Listening at: http://0.0.0.0:8000

部署后问题与怀疑点 #

将应用部署到Azure App Services后无法正常工作，怀疑是以下两个原因之一或共同导致：

1. Axios请求的基准URL选择不明确：是否保留localhost？还是需要改为0.0.0.0、Web应用的默认域名或虚拟IP地址？
2. Web应用强制使用HTTPS，但gunicorn监听的是http://0.0.0.0:8000（HTTP协议）。此前尝试用http://0.0.0.0:8000作为基准URL时，收到错误提示：此请求已被阻止；内容必须通过HTTPS提供

注：当前已将CORS策略设置为允许所有，可排除CORS因素影响

需求 #

希望获得Azure环境下，连接前端与后端API容器的具体指导

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