NGINX HTTPS反向代理转发/api至HTTP后端报错问题排查

两个报错均由前端请求地址配置错误、Nginx反向代理规则存在瑕疵导致：

• 混合内容错误：HTTPS协议加载的前端页面主动发起HTTP明文请求，触发浏览器安全拦截
• 证书common name不匹配错误：前端直接通过IP访问8080端口，但SSL证书仅为域名签发，无法通过IP校验；同时该操作本身违背了不暴露8080端口的初衷。

第一步：修改前端后端请求基础地址 #

不需要在前端配置IP、端口，直接使用同域名下的相对路径即可，彻底规避协议、域名不匹配问题：

// 优先使用相对路径，后续切换环境、域名不需要额外修改配置
const API_BASE_URL = '/api'

// 如果需要写绝对路径，直接使用域名即可，不要带端口、不要写IP
// const API_BASE_URL = 'https://www.mydomain.com/api'

注意：修改完前端配置后需要重新打包构建，将生成的静态资源替换到Nginx的/usr/share/nginx/html部署目录下

第二步：修正Nginx配置 #

原有配置存在两处问题：一是80端口的跳转server块冗余配置了SSL证书参数，二是/api路径匹配规则未处理斜杠，容易出现路径转发错位。修正后的完整配置如下：

# 80端口仅负责HTTP流量跳转到HTTPS，不需要配置SSL证书
server {
  listen 80;
  server_name www.mydomain.com mydomain.com;
  return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name www.mydomain.com mydomain.com;

    ssl_certificate     /cert/cert.pem;
    ssl_certificate_key /cert/privkey.pem;

    # 前端单页应用静态资源配置
    location / {
      root   /usr/share/nginx/html;
      index  index.html index.htm;
      try_files $uri $uri/ /index.html;
      error_page 404 /index.html;
    }

    # /api路径反向代理到本地8080端口的Spring Boot服务
    location /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;
      
      # 注意：如果你的Spring Boot接口本身没有/api前缀，proxy_pass末尾保留斜杠
      # 转发逻辑：请求/api/user/list -> 后端收到/user/list
      proxy_pass http://127.0.0.1:8080/;

      # 如果你的Spring Boot接口本身带/api前缀，删掉proxy_pass末尾的斜杠即可
      # 转发逻辑：请求/api/user/list -> 后端收到/api/user/list
      # proxy_pass http://127.0.0.1:8080;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
}

第三步：生效配置并加固端口安全 #

1. 先校验Nginx配置合法性，避免配置错误导致服务中断：

nginx -t

2. 校验通过后重载Nginx使配置生效：

nginx -s reload

3. 修改服务器防火墙、安全组规则，删除公网入方向8080端口的放行规则，仅保留本地环回地址可访问8080，彻底避免后端端口暴露到公网。

配置生效后，所有前端发起的/api开头请求都会通过当前域名的HTTPS通道发送到Nginx，不会出现混合内容、证书不匹配问题；Nginx在服务器本地将请求转发给8080端口的后端服务，全程后端端口不对外暴露，符合安全要求。

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