Nginx无法转发请求至Nuxt应用端口3000问题排查

我有一个Nuxt应用，配置Nginx后，使用curl localhost:3000可正常返回状态码200及页面内容，但通过域名访问时加载超时，提示“无法访问此网站”。

Nginx错误日志 #

[error] 72792#72792: *1 connect() failed (111: Connection refused) while connecting to upstream, client: 172.68.50.201, server: domain.com , request: "GET / HTTP/1.1", upstream: "http://[::1]:3000/", host: "domain.com"

端口监听状态（netstat -tulpn输出） #

Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name
tcp        0      0 0.0.0.0:3000            0.0.0.0:*               LISTEN      70267/node
tcp        0      0 0.0.0.0:443             0.0.0.0:*               LISTEN      72791/nginx: master
tcp        0      0 127.0.0.1:33060         0.0.0.0:*               LISTEN      773/mysqld
tcp        0      0 127.0.0.1:3306          0.0.0.0:*               LISTEN      773/mysqld
tcp        0      0 0.0.0.0:80              0.0.0.0:*               LISTEN      72791/nginx: master
tcp        0      0 127.0.0.53:53           0.0.0.0:*               LISTEN      61184/systemd-resol
tcp        0      0 0.0.0.0:22              0.0.0.0:*               LISTEN      689/sshd: /usr/sbin
tcp6       0      0 :::443                  :::*                    LISTEN      72791/nginx: master
tcp6       0      0 :::80                   :::*                    LISTEN      72791/nginx: master
tcp6       0      0 :::22                   :::*                    LISTEN      689/sshd: /usr/sbin
udp        0      0 127.0.0.53:53           0.0.0.0:*                           61184/systemd-resol

当前Nginx配置 #

server {
        listen 443 ssl ;
        listen [::]:443 ssl ;
        include snippets/self-signed.conf;
        include snippets/ssl-params.conf;
        server_name domain.com www.domain.com;

        root /path/to/my/front-app;

        error_log /var/log/nginx/nuxt.error.log;

        index index.html index.htm;

        location / {
        proxy_pass http://localhost:3000;
        include /etc/nginx/proxy_params;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        }
}
server {
        listen 80;
        listen [::]:80;
        server_name myServerIp;
        return 301 $https://myServerDomain;
}

问题原因与解决方法 #

1. 核心问题：Nginx尝试通过IPv6地址[::1]:3000连接Nuxt应用，但Nuxt仅监听了IPv4的0.0.0.0:3000，未开启IPv6监听，导致连接被拒绝。

2. 修复步骤：

   • 方法一：强制Nginx用IPv4代理
     将proxy_pass http://localhost:3000;修改为proxy_pass http://127.0.0.1:3000;，直接指定IPv4本地地址，避免localhost被解析为IPv6。
   • 方法二：让Nuxt同时监听IPv6
     在Nuxt配置中添加监听IPv6的设置：
     • Nuxt 3：在nuxt.config.ts中添加server: { host: '::' }
     • Nuxt 2：在nuxt.config.js中添加server: { host: '::' }
       这样应用会同时监听IPv4和IPv6端口，适配Nginx的连接请求。
   • 额外修复：80端口跳转语法错误
     当前80端口的return语句存在语法问题，$https://myServerDomain应改为https://$host$request_uri，同时建议将server_name改为域名而非IP，确保跳转正确：

     server {
             listen 80;
             listen [::]:80;
             server_name domain.com www.domain.com;
             return 301 https://$host$request_uri;
     }
     

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