如何正确配置Nginx代理Angular 5 ng Serve（localhost:4200）？

我刚巧碰到过一模一样的问题！你现在的核心困境是：网上大部分Nginx配置都是针对生产构建完成的Angular项目（即ng build生成的dist目录），但你要代理的是运行在localhost:4200的开发服务器（ng serve），两者的资源加载逻辑完全不同——开发模式下Angular的资源是由开发服务器动态生成并托管的，不是本地静态文件，所以直接套用生产配置会导致资源请求错误，出现空白页。

正确的Nginx代理配置 #

下面是专门针对ng serve开发服务器的Nginx配置，直接复制到你的Nginx配置文件（比如/etc/nginx/conf.d/angular-dev.conf）即可：

server {
    listen 80;
    server_name 192.168.1.84; # 替换成你的Nginx服务器IP或域名

    # 转发所有请求到Angular开发服务器
    location / {
        proxy_pass http://localhost:4200;
        
        # 关键：设置请求头，让Angular开发服务器识别合法请求
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # 支持ng serve的热重载WebSocket
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

配置关键说明 #

• proxy_pass http://localhost:4200：将所有发往Nginx的请求（包括静态资源、API请求）全部转发到Angular开发服务器
• proxy_set_header Host $host：这是解决你当前资源加载失败的核心！Angular开发服务器会校验请求的Host头，如果不设置，它会拒绝资源请求，导致inline.bundle.js等文件加载失败
• WebSocket相关配置：ng serve的热重载功能依赖WebSocket，缺少这些配置会导致热重载失效，甚至偶尔出现资源加载异常

操作步骤 #

1. 将上述配置保存到Nginx的conf.d目录下（确保文件名以.conf结尾）
2. 测试配置语法是否正确：

   nginx -t
   

3. 重启Nginx使配置生效：

   # Systemd系统（如Ubuntu 18.04+、CentOS 7+）
   systemctl restart nginx
   # 非Systemd系统
   service nginx restart
   

额外排查点 #

• 确认localhost:4200的ng serve正在运行，且直接访问http://localhost:4200能正常显示页面
• 检查Nginx服务器的防火墙是否开放了80端口（或你配置的监听端口）
• 如果仍有问题，打开浏览器控制台查看请求的响应头，确认Host头是否正确传递到了Angular开发服务器

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