Angular 7项目经Nginx反向代理后访问localhost显示空白页问题

这个问题的核心原因是你当前的Nginx配置对所有请求都强制设置了Connection 'upgrade'头——这是给WebSocket请求用的（Angular的ng serve依赖WebSocket实现热重载），但普通的静态资源请求（比如那些.js文件）根本不需要这个升级头，导致Angular开发服务器收到请求后无法正确处理，进而返回错误，浏览器自然加载失败。

直接访问http://localhost:4200正常是因为此时请求直接发给Angular服务器，没有经过Nginx的头篡改，服务器能正确识别并响应静态资源请求。

解决步骤 #

1. 添加动态头映射规则 #

在你的Nginx配置的http块中添加一段map规则，用来根据请求的Upgrade头动态设置Connection头：

map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}

2. 修改代理配置 #

更新你现有的location /配置，把固定的Connection 'upgrade'替换为上面定义的变量：

location / {
    proxy_pass http://localhost:4200;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade; # 替换为动态变量
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

3. 重启Nginx #

保存配置后重启Nginx服务，让新配置生效。

完成以上操作后，再访问http://localhost应该就能正常加载页面了，同时Angular的热重载WebSocket功能也能正常工作。

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