Nginx反向代理SSL配置问题：HTTPS站点API请求混合内容报错

问题根源很明确：你现在的API直接通过HTTP暴露5000端口，而前端走HTTPS，浏览器会拦截跨协议的请求，所以触发混合内容警告。正确的做法是让Nginx在HTTPS的443端口代理API请求，前端用HTTPS调用/api路径就能转发到NodeJS服务，无需直接对外暴露5000端口。

具体修改步骤 #

1. 删除多余的5000端口server块：最后那个监听5000端口的server块完全没必要，直接删掉即可——NodeJS服务只需本地监听5000，不用对外暴露。
2. 在443端口的server块中添加API代理配置：在443的server块里，放在前端静态文件的location /之后，添加location /api的代理规则。

修改后的完整配置文件 #

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

    root /var/www/html;
    index index.html;
    server_name pim.********.***;

    location / {
        try_files $uri $uri/ =404;
    }
}

server {
    root /var/www/html;
    index index.html;
    server_name pim.*****.***; # managed by Certbot

    # 处理前端静态文件
    location / {
        try_files $uri $uri/ =404;
    }

    # 代理API请求到本地NodeJS服务
    location /api {
        proxy_pass http://localhost:5000;
        proxy_http_version 1.1;
        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/pim.*******.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/pim.*******.com/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 = pim.******.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    listen 80 ;
    listen [::]:80 ;
    server_name pim.******.com;
    return 404; # managed by Certbot
}

必须注意的细节 #

• 前端代码里的API请求路径必须改成：相对路径/api/xxx 或者 绝对路径https://你的域名/api/xxx，绝对不能再用http://你的域名:5000/xxx或http://localhost:5000/xxx，否则还是会触发混合内容警告。
• 配置修改后，先验证语法正确性：sudo nginx -t，如果提示test is successful，再重启Nginx生效：sudo systemctl restart nginx。

之前加/api配置出错的原因 #

大概率是配置位置不对（比如把location /api放在了listen相关配置之后），或者语法错误（比如proxy_pass后面漏写http://localhost:5000、标点符号写错），按照上面的位置添加就不会有问题。

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