Nginx迁移HTTPS后React应用与SpringBoot后端通信失败如何解决

问题相关截图：

这是浏览器混合内容（Mixed Content）安全策略导致的：HTTPS 站点下发起的所有主动 HTTP 请求（Fetch、AJAX 等）都会被浏览器直接拦截，请求不会发送到后端服务，因此你看不到任何服务端返回的状态码。
你之前站点是 HTTP 协议时没有这个限制，切换为 HTTPS 后触发了该策略。
如果你开启 SpringBoot 的 SSL 配置后请求依然失败，通常是以下原因导致：

• React 代码里的接口请求地址依然使用 HTTP 协议
• SpringBoot 部署的 SSL 证书不被浏览器信任（比如自签证书、证书域名和请求域名不匹配）
• SpringBoot 的 CORS 策略没有适配前端的 HTTPS 域名
• 服务器防火墙没有开放 SpringBoot HTTPS 端口的公网访问权限

方案一：Nginx 反向代理后端接口（最推荐） #

不需要修改 SpringBoot 任何配置，也不用给 SpringBoot 单独配置 SSL，利用现有 Nginx 的 HTTPS 配置统一对外提供服务，同时可以避免跨域问题。
操作步骤：

1. 打开 Nginx 对应站点的 HTTPS 配置文件，默认路径为 /etc/nginx/sites-available/ 下的站点配置文件
2. 在 443 端口的 server 配置块中，新增如下接口转发规则：

location /api/ {
    # 把后面的端口替换为你本地SpringBoot实际运行的端口
    proxy_pass http://127.0.0.1:8080/;
    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;
}

3. 修改 React 应用的接口请求前缀，把原来的 http://你的域名:8080/ 统一改为 /api/，重新打包部署 React 应用
4. 执行 nginx -t 测试配置无语法错误后，执行 systemctl reload nginx 重载 Nginx 配置即可生效

方案二：SpringBoot 单独配置 HTTPS #

如果不想通过 Nginx 转发接口，可以给 SpringBoot 单独配置 SSL 证书：

1. 给 SpringBoot 配置和前端域名一致的可信 SSL 证书，修改 application.yml 配置：

server:
  port: 8443
  ssl:
    enabled: true
    key-store: /path/to/your/certificate.p12
    key-store-password: 你的证书密码
    key-store-type: PKCS12

2. 修改 React 应用的所有接口请求地址，将协议改为 HTTPS，端口改为 SpringBoot 的 HTTPS 端口，比如 https://你的域名:8443/xxx，重新打包部署
3. 配置 SpringBoot 的 CORS 规则，允许前端 HTTPS 域名跨域访问
4. 放开服务器防火墙的 8443 端口公网访问权限

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