Spring Boot+Angular跨服务器部署HTTPS混合内容请求被拦截问题

报错信息：polyfills.9589fb3cb9f5b3ee.js:1 Mixed Content: The page at 'https://vcrm.malisoft.ml/login' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://194.135.90.77:8080/login'. This request has been blocked; the content must be served over HTTPS.

错误原因 #

这是浏览器的默认安全策略限制：HTTPS环境下加载的页面禁止主动发起HTTP明文请求，避免敏感数据泄露，这类问题统一归类为*混合内容（Mixed Content）*错误。

可行解决方案 #

• 方案1：给后端服务配置HTTPS证书
  这是最稳妥的长期方案，有两种实现方式：
  • 直接给Spring Boot服务配置SSL证书，把端口改成443或者其他HTTPS端口，前端所有请求地址改成HTTPS协议
  • 给后端服务加一层HTTPS反向代理（比如Nginx、Caddy），反向代理配置SSL证书，前端请求反向代理的HTTPS地址，由代理转发请求到后端HTTP服务
• 方案2：临时调试用修改浏览器安全配置（仅推荐本地开发用，生产环境禁止使用）
  以Chrome为例，在浏览器快捷方式的「属性-目标」输入框末尾加上参数 --allow-running-insecure-content，重启浏览器后就可以跳过混合内容校验，该配置会降低浏览器安全性，仅限本地调试阶段使用
• 方案3：同域名路径转发
  如果前端的Web服务和后端服务可以配置在同一个域名下，就在前端的Web服务（比如Nginx）里添加路径规则，比如把/api/开头的请求转发到后端HTTP地址，前端所有接口请求都改成相对路径/api/xxx，即可规避跨协议的混合内容报错

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