React与Spring Boot混合内容请求被拦截，配置HTTPS仍未解决求助

问题描述 #

• 部署环境：Windows Server 2012，React前端构建后部署在IIS（已配置ZeroSSL证书，HTTPS访问正常），Spring Boot后端独立部署
• 核心问题：前端通过HTTPS正常加载，但向后端发起HTTP请求时触发浏览器混合内容拦截，报错如下：

Mixed Content: The page at 'https://webpage.com/#/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://IP:8080/api/login/. This request has been blocked; the content must be served over HTTPS.

• 已尝试操作：将Spring Boot后端配置为HTTPS，在application.properties中添加以下配置（同证书已放置在配置文件目录），但问题未解决：

security.require-ssl=true
server.ssl.key-store=certificate
server.ssl.key-store-password=password
server.ssl.keyStoreType=PKCS12
server.ssl.keyAlias=tomcat

排查与解决方案 #

1. 先确认前端请求地址是否更新 #

后端改了HTTPS，但前端代码里的API地址可能还是硬编码的http://IP:8080，先全局搜索前端项目的baseURL配置，确保已经改成https://IP:8080，更推荐用相对路径配合IIS反向代理（避免暴露后端IP）。

2. 验证Spring Boot的HTTPS配置是否真的生效 #

直接在浏览器访问https://IP:8080/api/login（注意端口：Spring Boot默认HTTPS端口是8443，如果没改配置要访问8443），如果无法建立连接或提示证书错误，说明后端配置有问题：

• 证书路径要准确：server.ssl.key-store用绝对路径更稳妥，比如C:\your-backend-app\certificate.p12，避免相对路径的工作目录问题
• 确认证书格式：ZeroSSL的证书需要转换成PKCS12格式，转换命令参考：

  openssl pkcs12 -export -in fullchain.pem -inkey privkey.pem -out certificate.p12 -name tomcat
  

• 核对keyAlias和生成证书时的-name参数一致，密码也必须匹配。

3. 用IIS反向代理统一HTTPS入口（推荐方案） #

避免前端直接访问后端IP+端口，通过IIS做反向代理，让所有请求走HTTPS：

• 先安装IIS的URL Rewrite和Application Request Routing模块
• 在React站点的IIS配置中添加反向代理规则：
  • 匹配URL模式：^api/(.*)
  • 重写目标：https://localhost:8080/api/{R:1}（后端和IIS同服务器的情况）
• 前端请求改为相对路径/api/login，这样前端HTTPS请求会自动通过IIS转发到后端HTTPS接口，同时解决跨域问题。

4. 清除浏览器缓存 #

浏览器可能缓存了旧的HTTP请求地址，按Ctrl+Shift+R强制刷新页面，或者直接清除缓存后再测试。

5. 检查服务器防火墙端口 #

如果后端用了默认HTTPS端口8443，要确保Windows Server的防火墙开放了8443端口；如果自定义了端口，也要同步开放对应端口。

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