NGINX配置SSL后从HTTPS站点调用非SSL接口出现混合内容错误如何解决

浏览器出于安全策略禁止HTTPS页面发起HTTP请求，也就是你遇到的混合内容拦截规则，之前的配置未生效核心是两个问题：

• 前端仍然硬编码调用http://example.com:3333前缀的接口地址，请求没有走Nginx转发，直接暴露了HTTP协议地址被浏览器拦截
• Nginx的443端口配置仅转发了根路径到80端口，80端口的server块没有对应API路径的转发规则，无法处理接口请求

最简便的方案是通过Nginx反向代理将接口请求封装为HTTPS协议，不需要改造Node服务本身，操作步骤如下：

1. 修改前端Angular代码里的接口调用前缀，把http://example.com:3333统一替换为相对路径前缀/api，比如原来的http://example.com:3333/auth/login改为/api/auth/login，此时前端发起的请求会自动适配当前页面的HTTPS协议，请求地址变为https://example.com/api/auth/login
2. 修改Nginx的443端口server块配置，新增/api路径的转发规则，参考配置如下：

server {
    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    server_name  example.com;
    
    # Angular站点托管规则，比转发到80端口效率更高
    location / {
        root /path/to/your/angular/dist; # 替换为你Angular打包后的文件存放路径
        index index.html index.htm;
        try_files $uri $uri/ /index.html; # 适配Angular路由策略，避免刷新页面404
    }
    
    # API转发规则
    location /api/ {
        proxy_pass http://127.0.0.1:3333/; # 直接转发到本地Node服务，不需要走公网
        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;
    }

    # 保留Certbot自动生成的SSL证书相关配置即可
}

3. 验证Nginx配置语法是否正确，执行nginx -t，提示success后执行nginx -s reload重载配置生效。

如果不想修改前端代码的接口前缀，也可以直接给3333端口的Node服务配置SSL证书，让接口本身支持HTTPS访问，不过该方案需要改造Node服务的启动配置，维护成本比Nginx反向代理方案更高。

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