公网IP访问时Angular调用NestJS API返回index.html问题求助

问题分析 #

公网IP访问时API请求返回index.html，但本地localhost访问正常，核心原因是公网环境下API请求未被Nginx的/api/location块匹配，反而落入处理Angular静态文件的/location块，导致返回index.html。

解决方案 #

1. 强制Nginx优先匹配API路径 #

修改Nginx配置中的/api/location块，使用^~前缀强制优先匹配API路径，避免被/的location覆盖：

server {
    listen      80;
    listen [::]:80;

    server_name _;
    root   C:/Project/front;

    location / {
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # 修改此处，添加^~强制优先匹配
    location ^~ /api {
        rewrite ^/api/(.*)$ /$1 break;
        proxy_pass http://localhost:3001/;
        # 添加代理头，确保NestJS能正确识别请求来源
        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;
    }
}

^~的作用是：当请求路径匹配/api前缀时，直接使用该location块，不再匹配其他优先级更低的location。

2. 确认Angular的API请求路径配置 #

检查Angular的生产环境配置文件（environment.prod.ts），确保API基础路径设置为/api，而非具体IP或localhost：

export const environment = {
  production: true,
  apiBaseUrl: '/api' // 确保此处为/api，而非http://x.x.x.x:3001等其他路径
};

所有API请求需基于该基础路径发起，比如${environment.apiBaseUrl}/users，保证公网访问时请求路径为/api/users，能被Nginx正确匹配。

3. 清除浏览器缓存 #

公网访问时浏览器可能缓存了旧页面或请求路径，导致请求异常。按Ctrl+Shift+R强制刷新页面，或直接清除浏览器缓存后重新测试。

4. 检查Nginx访问日志排查请求路径 #

开启Nginx的访问日志，查看公网请求的具体路径，确认是否匹配到API location：
在server块中添加日志配置：

access_log logs/access.log;

重启Nginx后，查看logs/access.log中的请求记录，如果API请求路径不是/api/xxx而是/xxx，说明Angular的请求路径配置有误，需调整。

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