如何在同一VPS服务器用NGINX连接HTTPS前端与HTTP Spring Boot后端

在同一VPS服务器部署了HTTPS前端与HTTP Spring Boot后端，后端运行在http://localhost:8080/api/，但前端无法从后端获取数据，浏览器控制台报错：

GET http://localhost:8080/api/category/ net::ERR_CONNECTION_REFUSED

当前NGINX配置文件如下：

server {

        root /var/www/greenway/html;
        index index.html index.htm index.nginx-debian.html;

        server_name greenway-vld greenway-vld.ru www.greenway-vld.ru www.greenway-vld

        location / {
                try_files $uri $uri /index.html;
        }
        location /api{
                proxy_pass http://localhost:8080;
        }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/www.greenway-vld.ru/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/www.greenway-vld.ru/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot



}
server {
    if ($host = www.greenway-vld.ru) {
        return 301 https://$host$request_uri;
    } # managed by Certbot
    if ($host = greenway-vld.ru) {
        return 301 https://$host$request_uri;
    } # managed by Certbot
    if ($host = greenway-vld) {
        return 301 https://$host$request_uri;
    } # managed by Certbot
    if ($host = http://www.greenway-vld.ru) {
        return 301 https://$host$request_uri;
    } # managed by Certbot
    if ($host = http://greenway-vld.ru) {
        return 301 https://$host$request_uri;
    } # managed by Certbot
    if ($host = http://greenway-vld) {
        return 301 https://$host$request_uri;

        listen 80;
        listen [::]:80;

        server_name greenway-vld greenway-vld.ru www.greenway-vld.ru www.greenway-vld
    return 404; # managed by Certbot


}

问题排查 #

1. 前端请求路径错误：浏览器中的localhost指向用户本地机器而非VPS服务器，直接请求http://localhost:8080/api/必然连接失败，需改为请求与前端同域名的/api/路径，由NGINX反向代理到后端。
2. NGINX配置语法错误：
   • 两个server块的server_name末尾均缺少分号，导致NGINX无法正确解析配置；
   • 第二个server块中，listen和server_name被嵌套在if语句内部，违反NGINX语法规则；
   • /api路径的proxy_pass未处理好路径拼接逻辑，易导致请求路径与后端实际接口不匹配。

修正后的NGINX配置 #

# 处理HTTPS请求，同时托管前端页面与代理API
server {
    root /var/www/greenway/html;
    index index.html index.htm index.nginx-debian.html;

    server_name greenway-vld greenway-vld.ru www.greenway-vld.ru www.greenway-vld; # 补充分号

    # 兼容前端SPA路由，未匹配到的路径重定向到index.html
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 反向代理API请求到Spring Boot后端
    location /api/ {
        proxy_pass http://localhost:8080/api/; # 对应后端的/api上下文路径
        # 传递必要请求头，确保后端能正确处理请求
        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;
    }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/www.greenway-vld.ru/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/www.greenway-vld.ru/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

# HTTP请求强制跳转至HTTPS
server {
    listen 80;
    listen [::]:80;

    server_name greenway-vld greenway-vld.ru www.greenway-vld.ru www.greenway-vld; # 补充分号

    return 301 https://$host$request_uri;
}

操作步骤 #

1. 修改前端请求路径：将前端代码中所有http://localhost:8080/api/的请求地址，替换为相对路径/api/（例如fetch('/api/category')）；
2. 替换NGINX配置：将上述修正后的配置覆盖原配置文件（通常路径为/etc/nginx/sites-available/下的对应文件）；
3. 验证配置语法：执行命令sudo nginx -t，确认配置无语法错误（输出test is successful即可）；
4. 重启NGINX服务：执行命令sudo systemctl restart nginx，使新配置生效；
5. 检查后端状态：在VPS内部执行curl http://localhost:8080/api/category，确认后端能正常返回数据，排除后端未启动的问题。

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