部署MERN网站至Azure虚拟机遇阻：前端无法获取后端数据

是否需要修改代码？ #

不需要修改业务逻辑，但必须调整环境相关的配置项——本地开发和服务器运行的网络环境完全不同，硬编码的本地地址在服务器环境下会失效。

具体排查步骤 #

1. 确认后端服务状态 #

• 执行 pm2 status 查看Node.js后端进程是否正常在线，有没有频繁重启的记录
• 执行 pm2 logs 查看后端日志，定位是否有数据库连接失败、端口占用等报错
• 检查Azure虚拟机防火墙：在Azure控制台添加入站规则，允许后端监听的端口（比如3001）对外开放，或者确保Nginx已正确反向代理到该端口

2. 修正前端API请求地址 #

• 本地开发时前端请求写的 localhost:3001，在服务器环境下会指向用户本地机器而非Azure虚拟机，必须修改为：
  • 虚拟机的公网IP/域名（比如 http://xxx.xxx.xxx.xxx:3001）
  • 或者配合Nginx反向代理用相对路径（比如 /api），前端请求直接写 /api/xxx，由Nginx转发到后端

3. 验证Nginx反向代理配置 #

确保Nginx配置文件包含后端代理规则，示例：

server {
    listen 80;
    server_name 你的公网IP或域名;

    # 前端静态文件托管
    location / {
        root /var/www/your-react-build;
        try_files $uri $uri/ /index.html;
    }

    # 后端API反向代理
    location /api {
        proxy_pass http://localhost:3001;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

• 执行 nginx -t 检查配置语法是否正确，nginx -s reload 生效配置

4. 检查CORS跨域配置 #

• 如果后端用了CORS中间件（比如cors包），需将origin设置为前端的公网访问地址（比如 http://xxx.xxx.xxx.xxx），而非仅允许localhost
• 若用Nginx反向代理，也可在Nginx配置中添加CORS头，避免跨域拦截：

add_header Access-Control-Allow-Origin "http://你的前端地址";
add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
add_header Access-Control-Allow-Headers "Content-Type, Authorization";

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