同一Azure虚拟机内Angular访问Flask服务出现Connection refused错误排查

核心根因 #

你当前遇到的最核心问题是Angular请求地址配置错误：Angular代码运行在访问页面的用户本地浏览器中，你写的http://127.0.0.1:5000/login会让浏览器请求用户本地的5000端口，而非你部署服务的Azure虚拟机端口。

具体排查&解决步骤 #

1. 修改Angular请求地址 #

把代码里的请求地址替换为Azure虚拟机的公网IP/绑定的域名，示例：

// 把<Azure_VM_Public_IP>替换为你实际的公网IP
this.http.post<ILoginResponse>('http://<Azure_VM_Public_IP>:5000/login', {username: un, password: pswrd}).subscribe(data => {
      this.loginResponse.success = data.success;
      this.loginResponse.teamID = data.teamID;
    })

如果后续配置了域名，直接替换成域名即可。

2. 确认Flask监听配置正确 #

在Azure虚拟机内执行命令ss -tulnp | grep 5000，查看Flask进程的监听地址：

• 如果输出为0.0.0.0:5000则配置正常
• 如果输出为127.0.0.1:5000，说明监听配置未生效：检查代码中app.run()是否写死了host='127.0.0.1'（代码配置优先级高于启动参数），或者启动命令是否正确书写为flask run --host=0.0.0.0。

3. 验证5000端口公网连通性 #

在你自己的本地设备（非Azure虚拟机）执行连通性测试：

• Windows系统：打开Powershell执行Test-NetConnection <Azure_VM_Public_IP> -Port 5000
• Mac/Linux系统：打开终端执行nc -zv <Azure_VM_Public_IP> 5000
  如果连通失败，按顺序排查：
• 检查Azure门户网络安全组(NSG)的入站规则：是否允许源IP（或所有IP）访问TCP 5000端口，规则优先级高于拒绝规则
• 检查虚拟机内部防火墙：执行sudo ufw status确认有5000/tcp的放行规则，没有的话执行sudo ufw allow 5000/tcp添加规则。

4. 确认CORS配置生效 #

虽然你已开启CORS，建议确认配置顺序正确：flask-cors的初始化需要放在路由注册之前，示例：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
# 全局CORS配置要写在路由注册前
CORS(app, supports_credentials=True)

@app.route('/login', methods=['POST'])
def login():
    # 路由逻辑
    pass

5. 生产环境优化建议 #

不建议直接暴露Flask的5000端口到公网，可通过Nginx做反向代理统一入口：

• 所有请求走80/443端口，路径/api开头的请求转发到本地127.0.0.1:5000的Flask服务
• 其他路径请求返回Angular静态资源
  这种方案下Angular直接用相对路径/api/login发请求，不需要写死IP，也天然避免跨域问题。

内容的提问来源于stack exchange，提问作者Charbel abi daher